/* =====================================================
   RASTE MEDIA — DESIGN SYSTEM TOKENS
   ===================================================== */
:root {
    /* Surfaces */
    --bg-dark: #000000;
    --bg-card: #09090b;
    --bg-card-soft: rgba(20, 20, 25, 0.8);

    /* Text */
    --text-main: #f5f5f7;
    --text-muted: #86868b;
    --text-soft: #94a3b8;
    --text-soft-2: #cbd5e1;
    --text-dim: #64748b;
    --text-dimmer: #475569;

    /* Borders */
    --border-soft: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.15);
    --border-strong: rgba(255, 255, 255, 0.25);

    /* Brand / accents */
    --accent: #22d3ee;
    --accent-blue: #22d3ee;
    --accent-blue-light: #67e8f9;
    --accent-amber: #f59e0b;
    --accent-amber-light: #fbbf24;
    --accent-purple: #8b5cf6;
    --accent-danger: #ef4444;
    --brand-gradient: linear-gradient(135deg, #22d3ee 0%, #3b82f6 35%, #6366f1 70%, #7c3aed 100%);
    --brand-fire-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #f97316 70%, #ea580c 100%);

    /* Typography */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: monospace;

    /* Fluid section padding (mobile -> ultra-wide) */
    --section-pad-y: clamp(5rem, 10vw, 10rem);
    --section-pad-y-lg: clamp(6rem, 12vw, 14rem);
    --container-pad-x: clamp(1.25rem, 4vw, 2rem);

    /* Hero spacing */
    --hero-pad-top: clamp(8rem, 14vw, 12rem);
    --hero-margin-bottom: clamp(3rem, 10vw, 14rem);

    /* Radii */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* Motion */
    --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 0.2s ease;
    --t-base: 0.3s ease;
    --t-slow: 0.6s var(--ease-out-quint);

    /* Sizes */
    --container-max: 1200px;
    --container-narrow: 1100px;
    --container-wide: 1400px;

    /* Shared backgrounds */
    --hero-radial: radial-gradient(circle at center top, rgba(245, 158, 11, 0.1) 0%, rgba(34, 211, 238, 0.06) 40%, #000000 70%);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Let Lenis handle smooth-scroll. Native smooth-scroll fights Lenis
   in Chromium/Edge and causes the page to "freeze" mid-scroll. */
html {
    scroll-behavior: auto;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    line-height: 1.5;
}

body::-webkit-scrollbar {
    display: none;
}

/* Firefox - ukrycie paska głównego bez psucia webkita */
@-moz-document url-prefix() {
    body {
        scrollbar-width: none;
    }
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-pad-x);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* === HEADER & MOBILE MENU (APPLE PRO RESPONSIVE) === */
.hdr-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.hdr-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.hdr-logo-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    z-index: 110;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.hdr-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.hdr-logo-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 0.9;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #a1a1aa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hdr-line-1 {
    font-weight: 800;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.hdr-line-2 {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.hdr-nav {
    display: none;
    align-items: center;
    gap: 2rem;
    z-index: 110;
}

.hdr-nav-link {
    position: relative;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 0.25rem 0;
}

.hdr-nav-link:hover {
    color: #ffffff;
}

.hdr-nav-link[aria-current="page"] {
    color: #ffffff;
    font-weight: 600;
}

.hdr-nav-link[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.hdr-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 110;
}

/* Przycisk Panelu */
.hdr-btn-panel {
    position: relative;
    display: none;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15);
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
}

.hdr-btn-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.12));
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 999px;
    z-index: 0;
}

.hdr-btn-panel > * {
    position: relative;
    z-index: 1;
}

.hdr-btn-panel:hover::before {
    opacity: 1;
}

.hdr-btn-panel:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.hdr-btn-panel i {
    color: #9ca3af;
    transition: color 0.3s;
}

.hdr-btn-panel:hover i {
    color: #fff;
}

.hdr-btn-calendar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f7;
    color: #000;
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    outline: none;
    cursor: pointer;
    margin-right: 0;
    transition: all 0.3s ease;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    gap: 0.5rem;
}

.hdr-btn-calendar:hover {
    background: #ffffff;
    transform: scale(1.04);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hdr-btn-calendar .calendar-text {
    display: inline-block;
}

.hdr-btn-calendar i {
    width: 16px;
    height: 16px;
    color: #000;
}

@media (max-width: 767px) {
    .hdr-btn-calendar {
        background: transparent;
        color: #fff;
        padding: 0.5rem;
        margin-right: 0.25rem;
    }

    .hdr-btn-calendar:hover {
        background-color: transparent;
        transform: none;
        box-shadow: none;
    }

    .hdr-btn-calendar .calendar-text {
        display: none;
    }

    .hdr-btn-calendar i {
        width: 22px;
        height: 22px;
        color: #fff;
    }
}

a,
button,
#menu-toggle-btn {
    -webkit-tap-highlight-color: transparent !important;
}

.hdr-burger-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

#menu-toggle-btn {
    padding: 0;
    background-color: transparent;
    border: none;
    outline: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 10000;
    position: relative;
}

.burger-icon {
    position: relative;
    width: 22px;
    height: 12px;
}

.burger-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: #f5f5f7;
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.burger-line:nth-child(1) {
    top: 0;
}

.burger-line:nth-child(2) {
    bottom: 0;
}

#menu-toggle-btn.is-active .burger-line:nth-child(1) {
    transform: translateY(5.25px) rotate(45deg);
    background-color: #fff;
}

#menu-toggle-btn.is-active .burger-line:nth-child(2) {
    transform: translateY(-5.25px) rotate(-45deg);
    background-color: #fff;
}

/* === MOBILE MENU ROOT (APPLE PRO FLUID & RWD) === */
.hdr-mobile-root {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    width: 100vw;
    height: 100vh;
}

.hdr-mobile-root.is-visible {
    display: block;
}

.hdr-mobile-bg {
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: scale(0.98);
    transition: all 0.3s ease-out;
    padding: 6rem 1.5rem 2rem 1.5rem;
    box-sizing: border-box;
    overflow-y: auto;
}

.hdr-mobile-bg.is-open {
    opacity: 1;
    transform: scale(1);
}

.hdr-mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 5vh, 2.5rem);
    width: 100%;
}

.mobile-link {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.3rem, 6vw, 1.8rem);
    font-weight: 700;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s;
    text-align: center;
    word-break: break-word;
    padding: 0.25rem 0;
}

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

/* Active page indicator on mobile menu — same white underline as desktop. */
.mobile-link[aria-current="page"] {
    color: #ffffff;
}

.mobile-link[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    transform: translateX(-50%);
    width: 32px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.hdr-mobile-divider {
    width: 3rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: clamp(1.5rem, 4vh, 2.5rem) 0;
}

.mobile-btn {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 4vw, 1.125rem);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.875rem 2.5rem;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
}

.mobile-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

@media (min-width: 640px) {
    .hdr-btn-panel {
        display: flex;
    }
}

@media (min-width: 768px) {
    .hdr-container {
        padding: 0 3rem;
    }

    .hdr-nav {
        display: flex;
    }

    .hdr-burger-wrap {
        display: none;
    }

}

/* === FOOTER === */
.ftr-section {
    background-color: #000;
    padding: 4rem 0 2rem 0;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.ftr-section .container {
    padding-left: clamp(2rem, 6vw, 2rem);
    padding-right: clamp(2rem, 6vw, 2rem);
}

@media (min-width: 1024px) {
    .ftr-section .container {
        padding-left: var(--container-pad-x);
        padding-right: var(--container-pad-x);
    }
}

.ftr-top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.ftr-brand-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ftr-logo {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ftr-desc {
    font-size: 0.9rem;
    color: #86868b;
    line-height: 1.65;
    max-width: 300px;
    margin: 0;
}

.ftr-col-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #f5f5f7;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 1rem 0;
}

.ftr-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
}

.ftr-links a {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    color: #86868b;
    text-decoration: none;
    transition: color 0.25s ease;
    display: inline-block;
    padding: 0.45rem 0;
}

.ftr-links a:hover {
    color: #fff;
}

.ftr-links .ftr-location {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    color: #86868b;
    display: inline-block;
    padding: 0.45rem 0;
}

.ftr-links a[aria-current="page"] {
    color: #fff;
    font-weight: 600;
    position: relative;
}

.ftr-links a[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.ftr-links .hdr-btn-panel {
    display: inline-flex;
    width: auto;
    white-space: nowrap;
    margin-top: 0.25rem;
    margin-left: -1.25rem;
    padding: 0.625rem 1.25rem;
}
.ftr-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.ftr-copyright {
    font-size: 0.82rem;
    color: #86868b;
    margin: 0;
    order: 2;
}

.ftr-socials {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    order: 1;
}

.ftr-socials a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.08));
    border: none;
    border-radius: 999px;
    color: #9ca3af;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.15);
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s, color 0.3s;
}

.ftr-socials a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.12));
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 999px;
    z-index: 0;
}

.ftr-socials a > * {
    position: relative;
    z-index: 1;
}

.ftr-socials a:hover::before {
    opacity: 1;
}

.ftr-socials a:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.25);
    color: #fff;
}

.ftr-socials svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .ftr-top-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }

    .ftr-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }

    .ftr-copyright {
        order: 1;
    }

    .ftr-socials {
        order: 2;
    }
}

@media (min-width: 1024px) {
    .ftr-section {
        padding: 5.5rem 0 2.5rem 0;
    }

    .ftr-top-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 4rem;
        margin-bottom: 4rem;
    }

    .ftr-links {
        gap: 0.15rem;
    }

    .ftr-links a {
        padding: 0.3rem 0;
    }
}

/* === SEKCJA 5: CALL TO ACTION (NAPRAWIONA RESPONSYWNOŚĆ) === */
.apple-finale-cta {
    padding: clamp(6rem, 18vw, 18rem) 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #000;
}

.finale-ambient-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
    mix-blend-mode: screen;
}

.finale-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 var(--container-pad-x);
    box-sizing: border-box;
}

.finale-content {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ========================================= */
/* === STRONA KONTAKT === */
/* ========================================= */

@keyframes cinemaFadeInBg {0% {opacity: 0;} 100% {opacity: 0.2;}}
@keyframes cinemaFadeInSec {0% {opacity: 0;} 100% {opacity: 1;}}

/*.method-minimal:hover {
    transform: translateY(-3px);
}*/

/* =====================================================
   LEGAL PAGES (Polityka Prywatności, Regulamin)
   ===================================================== */
.legal-hero {
    position: relative;
    width: 100%;
    padding-top: var(--hero-pad-top);
    padding-bottom: clamp(3rem, 6vw, 5rem);
    background: var(--hero-radial);
    background-color: var(--bg-dark);
    box-sizing: border-box;
    overflow: hidden;
}

.legal-hero-container {
    position: relative;
    z-index: 2;
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--container-pad-x);
    text-align: center;
}

.legal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.03);
}

.legal-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text-main);
    margin-bottom: 1.75rem;
}

.legal-subtitle {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: var(--text-soft);
    max-width: 640px;
    margin: 0 auto 2rem auto;
    line-height: 1.6;
}

.legal-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

.legal-meta-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-dimmer);
}

.legal-section {
    padding: clamp(3rem, 6vw, 5rem) 0 var(--section-pad-y) 0;
    background: var(--bg-dark)
}

.legal-container {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--container-pad-x);
}

.legal-content {
    color: var(--text-soft-2);
    font-size: 1.0625rem;
    line-height: 1.8;
}

.legal-content>*:first-child {
    margin-top: 0;
}

.legal-content h2 {
    font-size: clamp(1.625rem, 3vw, 2.125rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin: 4rem 0 1.5rem 0;
    scroll-margin-top: 100px;
}

.legal-content h3 {
    font-size: clamp(1.2rem, 2.2vw, 1.4rem);
    font-weight: 600;
    color: var(--text-main);
    margin: 2.5rem 0 1rem 0;
    letter-spacing: -0.01em;
}

.legal-content h4 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 1.75rem 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.legal-content p {
    margin-bottom: 1.25rem;
    color: var(--text-soft-2);
}

.legal-content strong {
    color: var(--text-main);
    font-weight: 600;
}

.legal-content em {
    color: var(--text-soft);
    font-style: italic;
}

.legal-content a {
    color: var(--accent-blue-light);
    text-decoration: none;
    border-bottom: 1px solid rgba(56, 189, 248, 0.3);
    transition: border-color var(--t-base), color var(--t-base);
}

.legal-content a:hover {
    color: #fff;
    border-bottom-color: var(--accent-blue-light);
}

.legal-content ul,
.legal-content ol {
    margin: 1rem 0 1.5rem 1.5rem;
    padding-left: 0.5rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
    color: var(--text-soft-2);
}

.legal-content li::marker {
    color: var(--text-dim);
}

.legal-content li>ul,
.legal-content li>ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.legal-content hr {
    border: none;
    height: 1px;
    background: var(--border-soft);
    margin: 3rem 0;
}

.legal-content blockquote {
    margin: 1.5rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--accent-blue);
    background: rgba(0, 113, 227, 0.05);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text-soft-2);
}

.legal-content blockquote p:last-child {
    margin-bottom: 0;
}

.legal-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-card);
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    border: 1px solid var(--border-soft);
    color: var(--text-main);
}

.legal-toc {
    margin: 0 0 4rem 0;
    padding: 1.75rem 2rem;
    background: var(--bg-card-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.legal-toc-title {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 1rem 0;
}

.legal-toc ol {
    margin: 0;
    padding-left: 1.25rem;
}

.legal-toc li {
    margin-bottom: 0.5rem;
    color: var(--text-soft);
}

.legal-toc a {
    color: var(--text-soft-2);
    text-decoration: none;
    border: none;
    transition: color var(--t-base);
}

.legal-toc a:hover {
    color: var(--text-main);
}

.legal-content dl {
    margin: 1.5rem 0;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
}

.legal-content dt {
    font-weight: 600;
    color: var(--text-main);
    margin-top: 1.25rem;
}

.legal-content dt:first-child {
    margin-top: 0;
}

.legal-content dd {
    margin: 0.25rem 0 0 0;
    color: var(--text-soft-2);
}

.legal-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.legal-content th,
.legal-content td {
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
}

.legal-content th {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-main);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.legal-content tr:last-child td {
    border-bottom: none;
}

@media (max-width: 768px) {
    .legal-hero {
        padding-top: clamp(7rem, 18vw, 9rem);
    }

    .legal-content {
        font-size: 1rem;
        line-height: 1.75;
    }

    .legal-toc {
        padding: 1.5rem;
    }

    .legal-content h2 {
        margin: 3rem 0 1.25rem 0;
    }

    .legal-content ul,
    .legal-content ol {
        margin-left: 1rem;
    }
}

/* =====================================================
   RASTE MEDIA — NEW COMPONENTS
   ===================================================== */

/* ---- Included-In-Price grid ---- */

.rm-included-grid {
    gap: 1.5rem;
}

.rm-included-card {
    border-radius: var(--radius-md);
}

.rm-included-card:hover {
    border-color: rgba(34, 211, 238, 0.3);
}

/* ---- Website Configurator ---- */

@media (max-width: 860px) {
    .rm-cfg-body {
        grid-template-columns: 1fr;
    }
}

/* Config summary card */

.rm-cfg-cta {
    width: 100%;
    text-align: center;
}

.rm-cfg-cta:hover {
    opacity: 0.88;
}

/* ---- Process Timeline ---- */

.rm-process-timeline::before {
    opacity: 0.25;
}

.rm-step-num-wrap {
    flex-shrink: 0;
}

.rm-step-body {
    flex: 1;
}

/* ---- Section header reusable ---- */

/* ---- FAQ ---- */
.rm-faq-section {
    background: var(--bg-card);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

.rm-faq-grid {
    flex-direction: column;
}

/* ---- Guarantee block ---- */
.rm-guarantee-section {
    text-align: center;
}

.rm-guarantee-card {
    max-width: 700px;
    margin: 0 auto;
    background: var(--bg-card);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: var(--radius-lg);
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.rm-guarantee-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(34, 211, 238, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.rm-guarantee-icon i {
    width: 28px;
    height: 28px;
    color: #22d3ee;
}

.rm-guarantee-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #f5f5f7;
}

.rm-guarantee-desc {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.7;
    max-width: 520px;
}

/* ---- Mockup showcase ---- */
.rm-showcase-section {
    overflow: hidden;
}

.rm-showcase-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 768px) {
    .rm-showcase-inner {
        grid-template-columns: 1fr;
    }
}

.rm-showcase-text h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #f5f5f7;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

.rm-showcase-text p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.rm-mockup-frame {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.rm-mockup-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(255,255,255,0.02);
}

.rm-mockup-url {
    flex: 1;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    padding: 0.3rem 0.75rem;
    font-size: 0.7rem;
    color: #475569;
    font-family: var(--font-mono);
    margin: 0 0.5rem;
}

.rm-mockup-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rm-mock-hero-bar {
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(34, 211, 238, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.rm-mock-hero-bar span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #22d3ee;
    letter-spacing: 0.05em;
}

.rm-mock-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.75rem;
}

.rm-mock-block {
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-soft);
}

.rm-mock-block-tall { height: 70px; }
.rm-mock-block-medium { height: 70px; }
.rm-mock-block-short { height: 36px; }

.rm-mock-three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}

.rm-mock-sm {
    height: 55px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-soft);
}

/* ---- Checklist ---- */
.rm-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rm-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.5;
}

.rm-checklist li i {
    width: 18px;
    height: 18px;
    color: #22d3ee;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ---- Panel (pn) Raste Media updates ---- */

/* =====================================================
   RASTE MEDIA — BRAND COMPONENTS v2
   ===================================================== */

/* Amber gradient utility */

/* Active nav link override */
.hdr-nav-link-active {
    color: #ffffff !important;
    font-weight: 600;
}
.hdr-nav-link-active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    background: var(--accent-amber);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

/* ============================================
   HERO STATEMENT — homepage
   ============================================ */

/* Left: Badge + headline + links */

/* Right: Stats card */

/* ============================================
   STATS STRIP
   ============================================ */

/* ============================================
   SECTION EYEBROW
   ============================================ */

/* ============================================
   INCLUDED IN SUBSCRIPTION — bento grid
   ============================================ */
.rm-included-section {
    background: var(--bg-dark);
}

.rm-included-title {
    margin-bottom: 1rem;
}
/* Bento layout */
.rm-included-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    padding: 2rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.rm-included-card {
    background: var(--bg-card);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: background 0.2s;
}
.rm-included-card:hover { background: rgba(20, 20, 25, 0.98); }
.rm-included-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0.25rem;
}
.rm-included-icon i { width: 20px; height: 20px; color: #f59e0b; }
.rm-included-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f5f5f7;
    letter-spacing: -0.01em;
}
.rm-included-desc {
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.55;
}
@media (max-width: 1024px) {
    .rm-included-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .rm-included-grid { grid-template-columns: 1fr; }
    .rm-included-card { padding: 1.5rem; }
}

/* ============================================
   PROCESS SECTION
   ============================================ */
.rm-process-section {
    padding: var(--section-pad-y) 0;
}
.rm-process-header {
    text-align: center;
    margin-bottom: 4rem;
}

.rm-process-title {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #f5f5f7;
    line-height: 1.1;
    margin-bottom: 1rem;
}
.rm-process-desc {
    font-size: 1rem;
    color: #475569;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
}
/* Vertical timeline */
.rm-process-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 780px;
    margin: 0 auto;
    position: relative;
}
.rm-process-timeline::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 56px;
    bottom: 32px;
    width: 1px;
}
@media (max-width: 640px) {
    .rm-process-timeline::before { left: 20px; }
}
.rm-step {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 1.5rem;
    padding: 0 0 3rem 0;
    position: relative;
}
@media (max-width: 480px) {
    .rm-step { grid-template-columns: 42px 1fr; gap: 1rem; }
}
.rm-step-num-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.2rem;
    position: relative;
    z-index: 2;
}
.rm-step-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    font-family: var(--font-mono);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .rm-step-num { width: 42px; height: 42px; font-size: 0.85rem; }
}
.rm-step-body {
    padding-top: 0.85rem;
    padding-bottom: 0.5rem;
}
.rm-step-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 0.5rem;
}
.rm-step-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #f5f5f7;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}
.rm-step-desc {
    font-size: 0.92rem;
    color: #64748b;
    line-height: 1.65;
    max-width: 580px;
}
.rm-step-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.rm-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    padding: 0.35rem 0.75rem;
    letter-spacing: 0.01em;
}

/* ============================================
   CONFIGURATOR
   ============================================ */
.rm-cfg-section {
    padding: var(--section-pad-y) 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
.rm-cfg-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.rm-cfg-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #f5f5f7;
    margin-bottom: 0.75rem;
}
.rm-cfg-subtitle {
    font-size: 0.95rem;
    color: #475569;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}
.rm-cfg-body {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 3rem;
    align-items: start;
}
@media (max-width: 900px) {
    .rm-cfg-body { grid-template-columns: 1fr; }
}
.rm-cfg-left { display: flex; flex-direction: column; }
/* Summary card */
.rm-cfg-summary {
    background: var(--bg-dark);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    padding: 2rem;
    position: sticky;
    top: 7rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.rm-cfg-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.5rem;
    background: #f59e0b;
    color: #000;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--font-main);
    transition: background 0.2s, transform 0.2s;
    margin-top: 0.5rem;
}
.rm-cfg-cta:hover { background: #fbbf24; transform: scale(1.02); }
.rm-cfg-cta:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
/* ============================================
   HERO — Page sub-heroes (jak-dzialamy, cennik)
   ============================================ */

/* jak-dzialamy: steps-display hero */

/* Step strip - horizontal decorative bar below the title */

/* =====================================================================
   RASTE MEDIA — PREMIUM OVERHAUL v3
   "elegant but furious" · glassmorphism · smooth · expensive
   ===================================================================== */

/* ---- 1. RECOLOR: orange icon accents → cyan-blue (brand consistency) ---- */
.rm-section-eyebrow i,
.rm-process-eyebrow i,
.rm-cfg-eyebrow i,
.rm-hero-pricing-feat i,
.rm-hero-included-item i,
.rm-hero-process-eyebrow i,
.rm-hero-feat i,
.rm-included-icon i,
.rm-usp-icon-wrap i,
.rm-cfg-feat-toggle.is-on .rm-cfg-feat-icon i,
.rm-cfg-selected-item i,
.rm-feature-plus i {
    color: #22d3ee;
}
.rm-step-num,
.rm-hero-step-n,
.rm-hero-card-cta,
.rm-cfg-rec-tier {
    color: #22d3ee;
}

/* ---- 2. PREMIUM CTAs: featured plan & cfg use brand gradient (fire reserved) ---- */
.rm-plan-featured .rm-plan-cta,
.rm-cfg-cta {
    background: var(--brand-gradient) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(34, 211, 238, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-plan-featured .rm-plan-cta:hover,
.rm-cfg-cta:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 16px 40px rgba(34, 211, 238, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    opacity: 1 !important;
}

/* ---- 4. GLASSMORPHISM CARDS — premium frosted glass ---- */
.rm-included-card,
.rm-usp-card,
.rm-cfg-feat-toggle,
.rm-plan-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
        0 4px 20px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    transition:
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Animated gradient border on hover (using mask) */
.rm-included-card::before,
.rm-usp-card::before,
.rm-plan-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    padding: 1px !important;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.7) 0%, rgba(59, 130, 246, 0.4) 50%, rgba(124, 58, 237, 0.7) 100%) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
            mask-composite: exclude !important;
    opacity: 0 !important;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    height: auto !important;
    width: auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

/* Sheen sweep on hover */
.rm-included-card::after,
.rm-usp-card::after,
.rm-plan-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 60%,
        transparent 100%);
    transform: skewX(-20deg);
    transition: left 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 1;
}

/* HOVER STATES — smooth lift, glow, gradient border, sheen */
.rm-included-card:hover,
.rm-usp-card:hover,
.rm-cfg-feat-toggle:hover,
.rm-plan-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.14) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
        0 24px 56px rgba(0, 0, 0, 0.45),
        0 0 60px rgba(34, 211, 238, 0.08) !important;
}
.rm-included-card:hover::before,
.rm-usp-card:hover::before,
.rm-plan-card:hover::before {
    opacity: 1 !important;
}
.rm-included-card:hover::after,
.rm-usp-card:hover::after,
.rm-plan-card:hover::after {
    left: 125%;
}

/* Featured plan card — already lifted, more prominent on hover */

/* ---- 5. ICON WRAPPER — premium glow ---- */
.rm-included-icon,
.rm-usp-icon-wrap {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.08) 0%, rgba(124, 58, 237, 0.06) 100%) !important;
    border: 1px solid rgba(34, 211, 238, 0.15) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
        0 4px 16px rgba(34, 211, 238, 0.1);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-included-card:hover .rm-included-icon,
.rm-usp-card:hover .rm-usp-icon-wrap {
    transform: scale(1.08) rotate(-3deg);
    border-color: rgba(34, 211, 238, 0.4) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
        0 8px 24px rgba(34, 211, 238, 0.25);
}

/* ---- 6. STEP NUM — premium glass box with cyan number ---- */
.rm-step-num {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.06), rgba(124, 58, 237, 0.04)) !important;
    border: 1px solid rgba(34, 211, 238, 0.18) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
        0 4px 16px rgba(34, 211, 238, 0.08),
        0 0 24px rgba(34, 211, 238, 0.05) !important;
    color: #22d3ee !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.rm-step:hover .rm-step-num {
    transform: scale(1.08);
    border-color: rgba(34, 211, 238, 0.5) !important;
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.12), rgba(124, 58, 237, 0.08)) !important;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
        0 8px 24px rgba(34, 211, 238, 0.3),
        0 0 48px rgba(124, 58, 237, 0.2) !important;
    color: #fff !important;
}

/* ---- 7. STEP PILLS — glassmorphism ---- */
.rm-step-pill {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.08), rgba(34, 211, 238, 0.04)) !important;
    border: 1px solid rgba(34, 211, 238, 0.18) !important;
    color: #22d3ee !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-step-pill:hover {
    border-color: rgba(34, 211, 238, 0.4) !important;
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.14), rgba(34, 211, 238, 0.06)) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(34, 211, 238, 0.15);
}

/* ---- 8. STATS STRIP — premium depth ---- */

/* ---- 9. SMOOTH GLOBAL HOVER for buttons ---- */

/* Hero primary CTA — use brand gradient */

/* ---- 12. AMBIENT GLOWS — add subtle animated background orbs to sections ---- */
.rm-included-section,
.rm-usp-section,
.rm-pricing-section,
.rm-cfg-section,
.rm-process-section {
    position: relative;
    overflow: hidden;
}
.rm-included-section::before,
.rm-usp-section::before,
.rm-pricing-section::before,
.rm-cfg-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.06) 0%, transparent 70%);
    top: -200px;
    right: -200px;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}
.rm-included-section::after,
.rm-usp-section::after,
.rm-pricing-section::after,
.rm-cfg-section::after {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.05) 0%, transparent 70%);
    bottom: -150px;
    left: -100px;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
}
.rm-included-section .container,
.rm-usp-section .container,
.rm-pricing-section .container,
.rm-cfg-section .container,
.rm-process-section .container {
    position: relative;
    z-index: 1;
}

/* ---- 13. SECTION EYEBROW — gradient pill premium ---- */

/* ---- 14. INCLUDED CARD ICON — bigger + gradient ---- */
.rm-included-icon,
.rm-usp-icon-wrap {
    position: relative;
}
.rm-included-icon::before,
.rm-usp-icon-wrap::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.4), rgba(124, 58, 237, 0.4));
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
    filter: blur(8px);
}
.rm-included-card:hover .rm-included-icon::before,
.rm-usp-card:hover .rm-usp-icon-wrap::before {
    opacity: 1;
}

/* ---- 15. CARD CONTENT — relative for proper layering above sheen ---- */
.rm-included-card > *,
.rm-usp-card > *,
.rm-plan-card > * {
    position: relative;
    z-index: 3;
}

/* ---- 17. FAQ ITEMS — premium glass ---- */
.rm-faq-item {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.rm-faq-item:hover {
    border-color: rgba(34, 211, 238, 0.2) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
}
.rm-faq-item.is-open {
    border-color: rgba(34, 211, 238, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 32px rgba(34, 211, 238, 0.08);
}

/* ---- 19. RESPECT REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
    .rm-included-card,
    .rm-usp-card,
    .rm-plan-card,
    .rm-cfg-feat-toggle,
    .rm-step-num,
    .apple-btn-solid,
    .rm-hero-cta-primary {
        transition: none !important;
    }
    .rm-included-card::after,
    .rm-usp-card::after,
    .rm-plan-card::after {
        display: none !important;
    }
}

/* =========================================================================
   RASTE MEDIA — v4 "FURIOUS · CRYSTAL-CLEAR" OVERHAUL
   Blue-purple fire · seamless flow · polished chrome · auto-detailing energy
   ========================================================================= */

/* ---- A. PREMIUM STATIC BODY BACKGROUND — anchored to page, not viewport ----
   No "following" effect. Sophisticated gradient mesh that scrolls with content. */
body {
    background:
        /* Section 1 — top: cool cyan halo at right shoulder */
        radial-gradient(ellipse 60% 35% at 85% 8%,  rgba(34, 211, 238, 0.07) 0%, transparent 55%),
        /* Section 2 — upper-mid: indigo from left */
        radial-gradient(ellipse 55% 30% at 10% 28%, rgba(99, 102, 241, 0.06) 0%, transparent 55%),
        /* Section 3 — center: deep purple lift */
        radial-gradient(ellipse 70% 28% at 90% 50%, rgba(124, 58, 237, 0.07) 0%, transparent 55%),
        /* Section 4 — lower: cyan from left */
        radial-gradient(ellipse 60% 30% at 15% 72%, rgba(34, 211, 238, 0.06) 0%, transparent 55%),
        /* Footer breath */
        radial-gradient(ellipse 70% 30% at 50% 100%, rgba(124, 58, 237, 0.05) 0%, transparent 55%),
        var(--bg-dark) !important;
    background-attachment: scroll !important;
}
/* ---- B. SEAMLESS SECTION FLOW ---- */
/* Kill hard backgrounds & borders — sections breathe through the body gradient */
.rm-stats-strip,
.rm-problem-section,
.rm-aio-section,
.rm-showcase-section,
.rm-process-section,
.rm-included-section,
.rm-usp-section,
.rm-hero-statement,
.rm-pricing-section,
.rm-cfg-section,
.rm-faq-section {
    background: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    position: relative;
    z-index: 1;
}
/* Kill section ambient orbs (per-section radial gradients) since we now have page-level fire */
.rm-included-section::before,
.rm-usp-section::before,
.rm-pricing-section::before,
.rm-cfg-section::before,
.rm-included-section::after,
.rm-usp-section::after,
.rm-pricing-section::after,
.rm-cfg-section::after {
    display: none !important;
}
/* Header sits above fire */
.hdr-header { z-index: 1000 !important; }

/* Subtle gradient hairline at top of major sections — replaces hard borders */
.rm-problem-section::before,
.rm-aio-section::before,
.rm-showcase-section::before,
.rm-process-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(80%, 900px);
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(34, 211, 238, 0.15) 30%,
        rgba(124, 58, 237, 0.20) 50%,
        rgba(34, 211, 238, 0.15) 70%,
        transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* ---- C. STATS STRIP — refreshed (no card bg, no borders) ---- */

/* ---- D. PROBLEM SECTION — bold awareness with stat grid ---- */

.rm-problem-inner {
    text-align: center;
}

.rm-problem-title {
    word-break: break-word;
}

.rm-problem-lead strong {
    background: linear-gradient(180deg, transparent 60%, rgba(245, 158, 11, 0.15) 60%);
    padding: 0 0.15em;
}

@keyframes rmAioGlow {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}

/* ---- F. CRYSTAL-CLEAR CHROME GLOSS — animated shine on titanium gradient ---- */
.gradient-titanium-text,
.text-titanium {
    background: linear-gradient(110deg,
        #22d3ee 0%,
        #67e8f9 15%,
        #3b82f6 30%,
        #ffffff 45%,
        #6366f1 60%,
        #7c3aed 80%,
        #a78bfa 100%) !important;
    background-size: 250% 100% !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    color: transparent !important;
    animation: rmChromeSweep 8s ease-in-out infinite;
}
@keyframes rmChromeSweep {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
/* Same chrome treatment for the fire gradient — but with warmer pass-through */

/* ---- G. SHOWCASE SECTION — fire glow behind mockup ---- */
.rm-showcase-section {
    padding: clamp(6rem, 12vw, 12rem) 0;
}
.rm-mockup-frame {
    position: relative;
}
.rm-mockup-frame::before {
    content: '';
    position: absolute;
    inset: -40px;
    background:
        radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.15), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(124, 58, 237, 0.15), transparent 60%);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.8;
    animation: rmAioGlow 8s ease-in-out infinite;
}

/* ---- H. HERO PRICE NUMBER · chrome treatment ---- */

/* ---- I. FINALE CTA — fire breath on background ---- */
.apple-finale-cta {
    position: relative;
    z-index: 1;
    background: transparent !important;
}

/* ---- J. RESPECT REDUCED MOTION (extend) ---- */
@media (prefers-reduced-motion: reduce) {
    .rm-fire-orb,
    .gradient-titanium-text,
    .gradient-fire-text,
    .rm-hero-price-num,
    .rm-aio-glow,
    .rm-mockup-frame::before { animation: none !important; }
}

/* =========================================================================
   FAQ FLIP CARD SYSTEM · v5 — premium 3D card flip on hover/click
   Replaces boring accordion · question front, answer back, smooth flip
   ========================================================================= */
.rm-faq-section {
    padding: clamp(6rem, 12vw, 11rem) 0 !important;
}
.rm-faq-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 1.5rem !important;
    max-width: 1280px !important;
    margin: 3rem auto 0 !important;
}
/* Override old accordion styles on the item */
.rm-faq-item {
    border-bottom: none !important;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.rm-faq-item:focus-visible .rm-faq-front {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 0 2px rgba(34,211,238,0.5),
        0 12px 36px rgba(0,0,0,0.35);
}

/* 3D inner wrapper that rotates */

/* Hover flip (only on devices that can hover) */
@media (hover: hover) {
    .rm-faq-item:hover .rm-faq-inner {
        transform: rotateY(180deg);
    }
}
/* Click-toggle flip (works on all devices, especially touch) */

/* Card faces */
.rm-faq-face {
    transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-faq-front {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.008) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 20px rgba(0,0,0,0.2);
}
.rm-faq-back {
    background: linear-gradient(180deg, rgba(34,211,238,0.07) 0%, rgba(124,58,237,0.04) 100%);
    border-color: rgba(34,211,238,0.25);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 8px 32px rgba(0,0,0,0.4),
        0 0 60px rgba(34,211,238,0.08);
}
/* Front face hover glow */
.rm-faq-item:hover .rm-faq-front {
    border-color: rgba(34,211,238,0.3);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 12px 32px rgba(0,0,0,0.3),
        0 0 40px rgba(34,211,238,0.1);
}
/* Diagonal sheen sweep on front face during flip */
.rm-faq-front::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(110deg,
        transparent 40%,
        rgba(34,211,238,0.10) 50%,
        transparent 60%);
    transform: translateX(-100%) translateY(-50%);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.rm-faq-item:hover .rm-faq-front::before {
    transform: translateX(50%) translateY(-50%);
}

/* Icon block */
.rm-faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rm-faq-icon i { width: 22px; height: 22px; }

/* Question text — front face */
.rm-faq-question {
    letter-spacing: -0.01em;
    text-align: left;
}

/* Answer text — back face */
.rm-faq-answer {
    flex: 1;
    overflow-y: auto;
    max-height: 215px;
    padding-right: 4px;
    text-align: left;
}
.rm-faq-answer::-webkit-scrollbar { width: 4px; }
.rm-faq-answer::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 2px; }
.rm-faq-answer::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(34,211,238,0.4), rgba(124,58,237,0.4));
    border-radius: 2px;
}

/* Hint pill at bottom of each face */
.rm-faq-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #22d3ee;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 1.5rem;
}
.rm-faq-hint i {
    width: 14px; height: 14px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-faq-item:hover .rm-faq-front .rm-faq-hint i {
    transform: translateX(4px);
}

/* Mobile tweaks */
@media (max-width: 640px) {
    .rm-faq-grid {
        grid-template-columns: 1fr !important;
    }
    .rm-faq-item,
    .rm-faq-inner {
        min-height: 280px;
    }
    .rm-faq-answer { max-height: 180px; }
}

/* Reduced motion: skip the flip animation, show answer below question */
@media (prefers-reduced-motion: reduce) {
    .rm-faq-inner { transition: none !important; }
    .rm-faq-item:hover .rm-faq-inner,
    .rm-faq-item.is-flipped .rm-faq-inner {
        transform: none !important;
    }
    .rm-faq-back {
        position: relative !important;
        transform: none !important;
        margin-top: 1rem;
        opacity: 0;
        height: 0;
        padding: 0;
        border: none;
        overflow: hidden;
        transition: opacity 0.3s, height 0.3s;
    }
    .rm-faq-item.is-flipped .rm-faq-back {
        opacity: 1;
        height: auto;
        padding: 2rem;
        border: 1px solid rgba(34,211,238,0.25);
    }
}

/* =========================================================================
   v5 · EDITORIAL · FURIOUS · CLEAN · AUTO-DETAILING PREMIUM
   Massive type · italic editorial · monospace specs · spec-sheet aesthetic
   ========================================================================= */

/* ---- HERO POLISH ---- */

@keyframes rmDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.3); }
}
/* Italic refinement on hero headline */

/* Hero auto-detailing spec strip */

/* ---- DYNO STATS STRIP ---- */

/* ---- PROBLEM SECTION — EDITORIAL MANIFESTO ---- */
.rm-problem-section {
    padding: clamp(7rem, 14vw, 12rem) 0 !important;
}
.rm-problem-inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 1.5rem;
}
.rm-problem-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
}
.rm-problem-copy { text-align: left !important; }
/* Eyebrow with pulsing dot */
.rm-eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 10px #f59e0b;
    display: inline-block;
    margin-right: 0.55rem;
    vertical-align: middle;
    animation: rmDotPulse 2.4s ease-in-out infinite;
}

.rm-problem-title {
    font-size: clamp(2.8rem, 6.5vw, 5.5rem) !important;
    font-weight: 800 !important;
    line-height: 0.96 !important;
    letter-spacing: -0.045em !important;
    color: #f5f5f7 !important;
    margin: 0 0 2rem !important;
    text-align: left !important;
}
.rm-problem-title em {
    font-style: italic !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 60%, #a855f7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    /* Animated chrome sweep */
    background-size: 200% 100% !important;
    animation: rmFireSweep 9s ease-in-out infinite !important;
}
@keyframes rmFireSweep {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.rm-problem-lead {
    font-size: 1.18rem !important;
    color: #94a3b8 !important;
    line-height: 1.65 !important;
    margin: 0 0 1.25rem !important;
    max-width: 580px !important;
    text-align: left !important;
}
.rm-problem-lead strong { color: #f5f5f7 !important; font-weight: 700 !important; }
.rm-problem-lead-secondary {
    font-size: 1rem !important;
    color: #64748b !important;
    font-style: italic;
}
/* Right column: dramatic figures */
.rm-problem-figures {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-left: clamp(0rem, 4vw, 2rem);
    border-left: 1px solid rgba(255,255,255,0.08);
    align-self: stretch;
}
.rm-problem-fig {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rm-problem-fig:last-child { border-bottom: none; }
.rm-problem-fig-num {
    font-family: var(--font-mono,  monospace);
    font-size: clamp(3.5rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #f5f5f7;
    display: inline-flex;
    align-items: baseline;
}
.rm-problem-fig-num sup {
    font-size: 0.42em;
    color: #f59e0b;
    margin-left: 0.1em;
    top: -0.45em;
    font-weight: 700;
}
.rm-problem-fig-label {
    font-size: 0.95rem;
    color: #94a3b8;
    line-height: 1.55;
    max-width: 380px;
}
.rm-problem-fig-label strong { color: #f5f5f7; font-weight: 700; }

@media (max-width: 880px) {
    .rm-problem-grid {
        grid-template-columns: 1fr !important;
    }
    .rm-problem-figures {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.08);
        padding-top: 1rem;
        margin-top: 1rem;
    }
}

/* ---- SPEC SHEET SECTION ---- */
.rm-spec-section {
    padding: clamp(7rem, 14vw, 13rem) 0;
    position: relative;
    z-index: 1;
}
.rm-spec-header {
    max-width: 900px;
    margin: 0 auto 4.5rem;
    text-align: center;
    padding: 0 1.5rem;
}

.rm-spec-title {
    font-size: clamp(2.8rem, 6.5vw, 5.5rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.045em;
    color: #f5f5f7;
    margin: 0 0 1.75rem;
}
.rm-spec-title em {
    font-style: italic;
    font-weight: 800;
    background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.rm-spec-lead {
    font-size: 1.18rem;
    color: #94a3b8;
    line-height: 1.65;
    max-width: 760px;
    margin: 0 auto;
}
.rm-spec-lead strong { color: #f5f5f7; font-weight: 700; }
.rm-spec-lead em {
    color: #22d3ee;
    font-style: italic;
    font-weight: 600;
}

/* Spec table */
.rm-spec-table {
    max-width: 1280px;
    margin: 0 auto;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.005) 100%);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.rm-spec-thead {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr 1.3fr;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.025);
}
.rm-spec-th-label {
    font-family: var(--font-mono,  monospace);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #64748b;
    display: flex;
    align-items: center;
}
.rm-spec-th-good {
    position: relative;
}
.rm-spec-th-good::before {
    content: '';
    position: absolute;
    left: 0;
    top: -1.5rem;
    bottom: -1.5rem;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(34,211,238,0.3), transparent);
}
.rm-spec-col-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-family: var(--font-mono,  monospace);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.rm-spec-col-tag-bad {
    background: rgba(239,68,68,0.08);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.22);
}

/* Spec row */
.rm-spec-row {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr 1.3fr;
    padding: 1.75rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    align-items: center;
    transition: background 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.rm-spec-row:last-child { border-bottom: none; }
.rm-spec-row:hover {
    background: rgba(34,211,238,0.025);
}
.rm-spec-row:hover .rm-spec-cell-good {
    border-left-color: rgba(34,211,238,0.4);
}

/* Cell: label */
.rm-spec-cell-label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-right: 1.5rem;
}
.rm-spec-row-num {
    font-family: var(--font-mono,  monospace);
    font-size: 0.78rem;
    font-weight: 800;
    color: #475569;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.rm-spec-cell-label i {
    width: 20px;
    height: 20px;
    color: #22d3ee;
    flex-shrink: 0;
}
.rm-spec-cell-label span {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f5f5f7;
    letter-spacing: -0.01em;
}

/* Cells: bad / good */
.rm-spec-cell-bad,
.rm-spec-cell-good {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 1.5rem;
}
.rm-spec-cell-bad p,
.rm-spec-cell-good p {
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}
.rm-spec-cell-bad p { color: #94a3b8; }
.rm-spec-cell-good p { color: #cbd5e1; }
.rm-spec-cell-good p strong { color: #22d3ee; font-weight: 700; }

.rm-spec-cell-good {
    padding-left: 1.5rem;
    border-left: 1px solid rgba(255,255,255,0.06);
    transition: border-left-color 0.35s;
}

/* Price tags */
.rm-spec-price {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 7px;
    font-family: var(--font-mono,  monospace);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    align-self: flex-start;
}
.rm-spec-price-bad {
    color: #f87171;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    text-decoration: line-through;
    text-decoration-color: rgba(248,113,113,0.5);
    text-decoration-thickness: 1px;
}
.rm-spec-price-good {
    color: #22d3ee;
    background: rgba(34,211,238,0.1);
    border: 1px solid rgba(34,211,238,0.3);
}
.rm-spec-price-good i { width: 11px; height: 11px; }

/* TOTAL row — bigger, more dramatic */
.rm-spec-row-total {
    padding: 2.5rem 2rem !important;
    background: linear-gradient(180deg, rgba(34,211,238,0.03), rgba(124,58,237,0.03));
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}
.rm-spec-row-num-total {
    font-size: 1.1rem !important;
    color: #22d3ee !important;
}
.rm-spec-label-total i { width: 22px; height: 22px; }
.rm-spec-label-total span {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.rm-spec-total-num {
    font-family: var(--font-mono,  monospace);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.rm-spec-total-num strong { font-weight: 800; }
.rm-spec-total-bad {
    color: #f87171;
    text-decoration: line-through;
    text-decoration-color: rgba(248,113,113,0.45);
    text-decoration-thickness: 2px;
}
.rm-spec-total-good {
    background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.rm-spec-total-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono,  monospace);
    font-size: 0.7rem;
    color: #64748b;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.rm-spec-total-sub i {
    width: 12px; height: 12px;
    color: #22d3ee;
}

/* Bottom editorial line + CTA */
.rm-spec-bottom {
    text-align: center;
    margin-top: 5rem;
    padding: 0 1.5rem;
}
.rm-spec-bottom-line {
    font-size: clamp(1.5rem, 3.5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.3;
    color: #f5f5f7;
    margin: 0 0 2.5rem;
    max-width: 760px;
    margin-inline: auto;
    letter-spacing: -0.02em;
}
.rm-spec-bottom-line em {
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.rm-spec-bottom-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Mobile spec table */
@media (max-width: 880px) {
    .rm-spec-thead {
        display: none;
    }
    .rm-spec-row {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        padding: 1.5rem !important;
    }
    .rm-spec-cell-label {
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .rm-spec-cell-bad,
    .rm-spec-cell-good {
        padding: 0.75rem 0 0;
        padding-left: 0;
        border-left: none;
        position: relative;
    }
    .rm-spec-cell-bad::before {
        content: 'FREELANCER / SAM';
        display: block;
        font-family: var(--font-mono, monospace);
        font-size: 0.6rem;
        font-weight: 800;
        color: #f87171;
        letter-spacing: 0.18em;
        margin-bottom: 0.5rem;
    }
    .rm-spec-cell-good::before {
        content: 'RASTE MEDIA';
        display: block;
        font-family: var(--font-mono, monospace);
        font-size: 0.6rem;
        font-weight: 800;
        color: #22d3ee;
        letter-spacing: 0.18em;
        margin-bottom: 0.5rem;
    }
    .rm-spec-row-total {
        padding: 2rem 1.5rem !important;
    }
}

/* ---- FINALE CTA — editorial drama ---- */

.rm-finale-headline {
    font-size: clamp(3rem, 7.5vw, 6.5rem) !important;
    font-weight: 800 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.05em !important;
    color: #f5f5f7 !important;
    margin: 0 0 2rem !important;
    max-width: 900px;
    margin-inline: auto !important;
}
.rm-finale-headline em {
    font-style: italic !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 50%, #f59e0b 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    background-size: 200% 100% !important;
    animation: rmFireSweep 9s ease-in-out infinite !important;
}
.rm-finale-spec-strip {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 auto 2.5rem;
    padding: 0.65rem 1.1rem;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-wrap: wrap;
    justify-content: center;
}
.rm-finale-spec-item {
    display: inline-flex;
    flex-direction: column;
    gap: 0.18rem;
    font-family: var(--font-mono,  monospace);
    line-height: 1;
}
.rm-finale-spec-k {
    font-size: 0.6rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.rm-finale-spec-v {
    font-size: 0.92rem;
    font-weight: 800;
    color: #22d3ee;
    letter-spacing: 0.04em;
}
.rm-finale-spec-sep {
    width: 1px;
    height: 32px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.18), transparent);
    flex-shrink: 0;
}
/* Hide the old generic finale-eyebrow paragraph treatment */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .rm-hero-badge-dot,
    .rm-eyebrow-dot,
    .rm-spec-eyebrow-dot,
    .rm-finale-eyebrow-dot,
    .rm-problem-title em,
    .rm-finale-headline em { animation: none !important; }
}

/* =========================================================================
   CENNIK v5 · editorial hero + upsells + plan/addon configurator
   ========================================================================= */

/* Eyebrow dot color variants */

/* Cennik hero polish */
.rm-pricing-hero-headline {
    font-size: clamp(2.8rem, 6.5vw, 5.2rem) !important;
    font-weight: 800 !important;
    line-height: 0.95 !important;
    letter-spacing: -0.045em !important;
    color: #f5f5f7 !important;
    margin: 0 0 1.5rem !important;
    text-align: left;
}
.rm-pricing-hero-headline em {
    font-style: italic;
    font-weight: 800;
    background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: rmFireSweep 9s ease-in-out infinite;
}
.rm-pricing-hero-lead {
    font-size: 1.1rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 1.75rem;
    max-width: 520px;
}
.rm-pricing-hero-lead strong { color: #f5f5f7; font-weight: 700; }

/* ---- UPSELLS SECTION ---- */
.rm-upsells-section {
    position: relative;
    z-index: 1;
}
.rm-upsells-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
    padding: 0 1.5rem;
}
.rm-upsells-title {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: #f5f5f7;
    margin: 0 0 1.25rem;
}
.rm-upsells-title em {
    font-style: italic;
    font-weight: 800;
    background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.rm-upsells-desc {
    font-size: 1.05rem;
    color: #94a3b8;
    line-height: 1.6;
}
.rm-upsells-desc strong {
    color: #f5f5f7;
    font-weight: 700;
}

.rm-upsells-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    margin: 0 auto;
    padding: 0 1.5rem;
}

.rm-upsell-card {
    position: relative;
    padding: 1.75rem;
    background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
    border-radius: 1.1rem;
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow: hidden;
}
.rm-upsell-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.01) 60%, rgba(255,255,255,0.05) 100%);
    opacity: 1;
    transition: opacity 0.5s;
    pointer-events: none;
}
.rm-upsell-card:hover {
    border-color: rgba(34,211,238,0.3);
    box-shadow: 0 16px 40px rgba(0,0,0,0.3), 0 0 50px rgba(34,211,238,0.08);
}

.rm-upsell-card.is-on::after {
    content: '✓';
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22d3ee, #7c3aed);
    color: #050505;
    font-weight: 800;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(34,211,238,0.4);
}
.rm-upsell-icon {
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(34,211,238,0.12) 0%, rgba(124,58,237,0.06) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #22d3ee;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.rm-upsell-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f5f5f7;
    line-height: 1.3;
    margin: 0;
    letter-spacing: -0.01em;
}
.rm-upsell-desc {
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.55;
    margin: 0 0 auto;
    flex: 1;
}
.rm-upsell-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.18rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: auto;
    font-family: var(--font-mono,  monospace);
}
.rm-upsell-price-plus {
    font-size: 1rem;
    font-weight: 800;
    color: #22d3ee;
}
.rm-upsell-price-num {
    font-size: 1.7rem;
    font-weight: 800;
    color: #f5f5f7;
    letter-spacing: -0.02em;
}
.rm-upsell-price-unit {
    font-size: 0.65rem;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.14em;
    margin-left: 0.4rem;
    align-self: center;
}

.rm-upsells-note {
    text-align: center;
    margin-top: 2.5rem;
    font-family: var(--font-mono,  monospace);
    font-size: 0.78rem;
    color: #64748b;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---- CONFIGURATOR v2 ---- */

.rm-cfg-v2 .rm-cfg-body {
    display: grid !important;
    margin: 0 auto !important;
    padding: 0 1.5rem;
    align-items: start;
}

.rm-cfg-block {
    margin-bottom: 2rem;
}
.rm-cfg-block-label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-mono,  monospace);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #cbd5e1;
    margin: 0 0 1.25rem;
}

/* Plan selector row */

/* Upsell toggles */
.rm-cfg-upsells-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.rm-cfg-upsell-toggle {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem 1.1rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.005) 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
    font-family: inherit;
    color: #cbd5e1;
}
.rm-cfg-upsell-toggle:hover {
    border-color: rgba(34,211,238,0.25);
    background: rgba(34,211,238,0.025);
}
.rm-cfg-upsell-toggle.is-on {
    background: linear-gradient(135deg, rgba(34,211,238,0.06) 0%, rgba(124,58,237,0.03) 100%);
    border-color: rgba(34,211,238,0.4);
    color: #f5f5f7;
}
.rm-cfg-upsell-toggle i {
    width: 20px;
    height: 20px;
    color: #22d3ee;
}
.rm-cfg-upsell-name {
    font-size: 0.93rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.rm-cfg-upsell-toggle.is-on .rm-cfg-upsell-name {
    color: #f5f5f7;
    font-weight: 700;
}
.rm-cfg-upsell-price {
    font-family: var(--font-mono,  monospace);
    font-size: 0.8rem;
    font-weight: 800;
    color: #22d3ee;
    letter-spacing: 0.02em;
}

/* Summary card v2 */

.rm-cfg-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    font-family: var(--font-mono, monospace) !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.2em !important;
    color: #22d3ee !important;
    margin: 0 0 1.5rem !important;
}
.rm-cfg-summary-plan {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.rm-cfg-summary-plan-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #f5f5f7;
    letter-spacing: -0.01em;
}
.rm-cfg-summary-plan-price {
    font-family: var(--font-mono,  monospace);
    font-size: 1rem;
    font-weight: 800;
    color: #f5f5f7;
}

.rm-cfg-summary-upsells {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-height: 60px;
}
.rm-cfg-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.88rem;
    color: #cbd5e1;
}
.rm-cfg-summary-row-name {
    font-weight: 500;
    flex: 1;
    padding-right: 0.5rem;
}
.rm-cfg-summary-row-price {
    font-family: var(--font-mono,  monospace);
    font-weight: 700;
    color: #22d3ee;
    flex-shrink: 0;
}
.rm-cfg-summary-empty {
    font-size: 0.85rem;
    color: #64748b;
    font-style: italic;
    margin: 0;
}

.rm-cfg-summary-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    margin: 1.25rem 0;
}

.rm-cfg-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1.5rem;
}
.rm-cfg-summary-total-label {
    font-family: var(--font-mono,  monospace);
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}
.rm-cfg-summary-total-num {
    font-family: var(--font-mono,  monospace);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.rm-cfg-summary-note {
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
    margin: 1rem 0 0;
    line-height: 1.5;
}

/* Mobile responsiveness */
@media (max-width: 880px) {

    .rm-cfg-v2 .rm-cfg-body {
        grid-template-columns: 1fr !important;
    }
    .rm-cfg-summary-v2 {
        position: static !important;
    }
    
}

/* =========================================================================
   v6 · UNIFIED · GLASS · POLISHED CAR · CRYSTAL CLEAR
   - Single brand button system (replaces apple-btn-solid / btn-secondary-massive)
   - Cennik hero v3 (no ugly badges)
   - Polished offer card (gloss + edge highlights)
   - Brighter upsells (less monotone, more polished)
   - Spec-glance comparison panel (first-glance clarity)
   ========================================================================= */

/* ---------- BRAND GLASS BUTTON SYSTEM ---------- */
.rm-glass-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.65rem;
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: 0.93rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: #f5f5f7;
    background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.025) 100%);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
                0 8px 22px rgba(0,0,0,0.25);
    isolation: isolate;
    white-space: nowrap;
}
.rm-glass-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 50%);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}
.rm-glass-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    z-index: 0;
}
.rm-glass-btn > * { position: relative; z-index: 1; }
.rm-glass-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, 0.45);
    background: linear-gradient(180deg, rgba(34,211,238,0.1) 0%, rgba(124,58,237,0.05) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
                0 14px 36px rgba(0,0,0,0.35),
                0 0 40px rgba(34,211,238,0.18);
}
.rm-glass-btn:hover::after { left: 130%; }
.rm-glass-btn i {
    width: 16px; height: 16px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-glass-btn:hover i { transform: translateX(2px); }

/* PRIMARY = brighter cyan glass */
.rm-glass-btn-primary {
    background: linear-gradient(180deg, rgba(34,211,238,0.18) 0%, rgba(124,58,237,0.1) 100%);
    border-color: rgba(34,211,238,0.4);
    color: #f5f5f7;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),
                0 12px 32px rgba(0,0,0,0.35),
                0 0 32px rgba(34,211,238,0.15);
}
.rm-glass-btn-primary::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 60%);
}
.rm-glass-btn-primary:hover {
    background: linear-gradient(180deg, rgba(34,211,238,0.28) 0%, rgba(124,58,237,0.16) 100%);
    border-color: rgba(34,211,238,0.7);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28),
                0 18px 44px rgba(0,0,0,0.4),
                0 0 60px rgba(34,211,238,0.35);
}

/* GHOST = pure transparent glass */
.rm-glass-btn-ghost {
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border-color: rgba(255,255,255,0.1);
    color: #cbd5e1;
}
.rm-glass-btn-ghost:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
    color: #f5f5f7;
    border-color: rgba(255,255,255,0.25);
}

/* LARGE size for finales */
.rm-glass-btn-lg {
    padding: 1.15rem 2rem;
    font-size: 1rem;
    border-radius: 999px;
}
.rm-glass-btn-lg i { width: 18px; height: 18px; }

/* Finale actions container */
.rm-finale-actions {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2.5rem;
}
@media (max-width: 600px) {
    .rm-finale-actions { flex-direction: column; align-items: stretch; }
    .rm-finale-actions .rm-glass-btn { width: 100%; }
}

/* ---------- CLEAN EYEBROW (replaces ugly badges) ---------- */

/* ---------- CENNIK HERO v3 — clean, polished ---------- */
.rm-pricing-hero-v3 {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* (Cennik hero ambient bloom is now provided by .rm-custom-bg layered system) */
.rm-pricing-hero-container {
    display: grid;
    align-items: center;
    position: relative;
    z-index: 1;
}
.rm-pricing-hero-text { padding-right: 1rem; }

/* Override the v2 hero headline applied earlier */

/* ---------- POLISHED OFFER CARD ---------- */
.rm-offer-card {
    position: relative;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.01) 100%),
        radial-gradient(ellipse at top, rgba(34,211,238,0.08) 0%, transparent 60%);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 1.5rem;
    backdrop-filter: blur(36px) saturate(200%);
    -webkit-backdrop-filter: blur(36px) saturate(200%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        inset 0 0 0 1px rgba(255,255,255,0.04),
        0 24px 60px rgba(0,0,0,0.35),
        0 8px 24px rgba(0,0,0,0.2),
        0 0 60px rgba(34,211,238,0.05);
    overflow: hidden;
    isolation: isolate;
}
/* Top gloss — like a polished car body */
.rm-offer-card-gloss {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    border-radius: 1.5rem 1.5rem 50% 50% / 1.5rem 1.5rem 12% 12%;
    z-index: 0;
}
/* Side highlight — chrome edge */
.rm-offer-card-edge {
    position: absolute;
    top: 1px; bottom: 1px; left: 1px;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.4) 30%, rgba(255,255,255,0.4) 70%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}
.rm-offer-card > *:not(.rm-offer-card-gloss):not(.rm-offer-card-edge) { position: relative; z-index: 1; }

.rm-offer-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.9rem;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 999px;
    font-family: var(--font-mono,  monospace);
    font-size: 0.7rem;
    font-weight: 700;
    color: #67e8f9;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}
.rm-offer-card-pill-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 8px #22d3ee;
}

.rm-offer-card-price {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    margin: 0 0 0.75rem;
}
.rm-offer-card-num {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(3.6rem, 7vw, 5.2rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: #ffffff;
    background: linear-gradient(180deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: none !important;
    transform: none !important;
}
.rm-offer-card-price-meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.rm-offer-card-currency {
    font-family: var(--font-mono,  monospace);
    font-size: 0.95rem;
    font-weight: 800;
    color: #f5f5f7;
    letter-spacing: 0.05em;
}
.rm-offer-card-period {
    font-family: var(--font-mono,  monospace);
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.06em;
}

.rm-offer-card-tagline {
    font-size: 0.95rem;
    color: #cbd5e1;
    margin: 0 0 1.25rem;
    line-height: 1.4;
}

.rm-offer-card-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
    margin: 1rem 0 1.4rem;
}

.rm-offer-card-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.rm-offer-card-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: #e2e8f0;
    font-weight: 500;
    line-height: 1.4;
}
.rm-offer-card-list li i {
    width: 16px; height: 16px;
    color: #22d3ee;
    flex-shrink: 0;
    stroke-width: 2.5;
}

.rm-offer-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 1rem 1.5rem;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    color: #050505;
    background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
    border-radius: 999px;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 12px 28px rgba(34,211,238,0.35),
        0 0 40px rgba(34,211,238,0.2);
}
.rm-offer-card-cta i { width: 16px; height: 16px; }
.rm-offer-card-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        0 18px 40px rgba(34,211,238,0.45),
        0 0 60px rgba(34,211,238,0.4);
}
.rm-offer-card-cta:hover i { transform: translateY(2px); }

.rm-offer-card-fine {
    text-align: center;
    font-size: 0.78rem;
    color: #64748b;
    margin: 1rem 0 0;
    letter-spacing: 0.02em;
}

/* Mobile cennik hero */
@media (max-width: 880px) {
    .rm-pricing-hero-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .rm-pricing-hero-text { padding-right: 0; }
}

/* ---------- BRIGHTER UPSELL CARDS (override v5) ---------- */

/* Hide the rm-upsells-note (no longer needed on v2 since flow is clearer) */

/* Override upsells header eyebrow */
.rm-upsells-v2 .rm-upsells-header {
    text-align: center;
}

/* ---------- HOMEPAGE SPEC GLANCE PANEL — first-glance contrast ---------- */
.rm-spec-section .rm-spec-header {
    text-align: center;
    margin-bottom: 3rem;
}

.rm-spec-section .rm-spec-title {
    text-align: center;
}
.rm-spec-section .rm-spec-lead {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.rm-spec-glance {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.25rem;
    max-width: 1180px;
    margin: 0 auto 3.5rem;
    padding: 0 1.5rem;
    align-items: stretch;
}

.rm-spec-glance-card {
    position: relative;
    padding: 2rem 1.85rem;
    border-radius: 1.4rem;
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    overflow: hidden;
    isolation: isolate;
}
.rm-spec-glance-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 0;
    border-radius: 1.4rem 1.4rem 50% 50% / 1.4rem 1.4rem 14% 14%;
}
.rm-spec-glance-card > * { position: relative; z-index: 1; }

.rm-spec-glance-bad {
    background:
        linear-gradient(180deg, rgba(239,68,68,0.06) 0%, rgba(239,68,68,0.02) 100%);
    border: 1px solid rgba(239,68,68,0.2);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 18px 44px rgba(0,0,0,0.3);
}
.rm-spec-glance-good {
    background:
        linear-gradient(180deg, rgba(34,211,238,0.1) 0%, rgba(124,58,237,0.04) 100%);
    border: 1px solid rgba(34,211,238,0.35);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 24px 60px rgba(0,0,0,0.35),
        0 0 60px rgba(34,211,238,0.12);
}

.rm-spec-glance-tag {
    display: inline-block;
    font-family: var(--font-mono,  monospace);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #fca5a5;
    margin: 0 0 1.25rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.2);
}
.rm-spec-glance-tag-good {
    color: #67e8f9;
    background: rgba(34,211,238,0.12);
    border-color: rgba(34,211,238,0.3);
}

.rm-spec-glance-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    flex-wrap: wrap;
}
.rm-spec-glance-tilde {
    font-family: var(--font-mono,  monospace);
    font-size: 1.5rem;
    font-weight: 800;
    color: #ef4444;
    line-height: 1;
}
.rm-spec-glance-num {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: #ef4444;
    text-decoration: line-through;
    text-decoration-color: rgba(239,68,68,0.6);
    text-decoration-thickness: 3px;
}
.rm-spec-glance-num-good {
    background: linear-gradient(135deg, #22d3ee 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #f5f5f7;
    text-decoration: none;
}
.rm-spec-glance-unit {
    font-family: var(--font-mono,  monospace);
    font-size: 0.85rem;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.05em;
}

.rm-spec-glance-sub {
    font-family: var(--font-mono,  monospace);
    font-size: 0.78rem;
    font-weight: 700;
    color: #fca5a5;
    margin: 0 0 1.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rm-spec-glance-sub-good {
    color: #67e8f9;
}

.rm-spec-glance-list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.rm-spec-glance-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.92rem;
    color: #cbd5e1;
    line-height: 1.45;
}
.rm-spec-glance-list li i {
    width: 16px; height: 16px;
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 0.15rem;
    stroke-width: 2.5;
}
.rm-spec-glance-list-good li i {
    color: #22d3ee;
}
.rm-spec-glance-list-good li {
    color: #e2e8f0;
}

.rm-spec-glance-foot {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 600;
    color: #ef4444;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px dashed rgba(239,68,68,0.2);
}
.rm-spec-glance-foot-good {
    color: #67e8f9;
    border-top-color: rgba(34,211,238,0.2);
}

/* VS divider */
.rm-spec-glance-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0 0.5rem;
    min-width: 60px;
}
.rm-spec-glance-vs-line {
    width: 1px;
    flex: 1;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.2) 50%, transparent);
    min-height: 30px;
}
.rm-spec-glance-vs-mark {
    font-family: var(--font-mono,  monospace);
    font-size: 1.05rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.1em;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 6px 16px rgba(0,0,0,0.25);
}

@media (max-width: 880px) {
    .rm-spec-glance {
        grid-template-columns: 1fr;
    }
    .rm-spec-glance-vs {
        flex-direction: row;
        padding: 0;
    }
    .rm-spec-glance-vs-line {
        height: 1px;
        width: auto;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2) 50%, transparent);
    }
}

/* ---------- DETAILS / SUMMARY for spec table ---------- */
.rm-spec-details {
    max-width: 1180px;
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
}
.rm-spec-details[open] .rm-spec-details-chev { transform: rotate(180deg); }
.rm-spec-details-summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 auto 2rem;
    padding: 0.7rem 1.4rem;
    font-family: var(--font-mono,  monospace);
    font-size: 0.78rem;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: all 0.3s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 16px rgba(0,0,0,0.2);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.rm-spec-details-summary::-webkit-details-marker { display: none; }
.rm-spec-details-summary:hover {
    color: #f5f5f7;
    border-color: rgba(34,211,238,0.4);
    background: linear-gradient(180deg, rgba(34,211,238,0.06) 0%, rgba(255,255,255,0.02) 100%);
}
.rm-spec-details-chev {
    width: 14px; height: 14px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-spec-details[open] .rm-spec-details-summary {
    background: linear-gradient(180deg, rgba(34,211,238,0.08) 0%, rgba(124,58,237,0.04) 100%);
    border-color: rgba(34,211,238,0.5);
    color: #67e8f9;
}

/* ---------- HIDE OLD finale-actions class IF unused, keep for safety ---------- */

/* =========================================================================
   v7 · CUSTOM BACKGROUNDS · POLISHED CARBON × DIGITAL
   Replaces all .webp hero/finale background images.

   Visual concept ties the two brand pillars:
   - AUTO DETAILING : carbon fiber weave + chrome highlight sweep (polished car body)
   - WEBSITES       : pixel/spec dot grid (digital lattice / blueprint / code matrix)
   - BRAND          : cyan + purple atmospheric blooms

   Pure CSS + inline SVG data URIs. No images. GPU-friendly.
   ========================================================================= */

/* Base wrapper: full-bleed positioned layer, GPU isolated */
.rm-custom-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
    background: #050505 !important;
    /* Cancel any inherited image */
    background-image: none !important;
    isolation: isolate;
}

/* Layer 1: pixel grid + carbon weave + atmospheric blooms (static) */
.rm-custom-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Pixel/spec grid — tiny cyan + purple dots (websites + blueprints) */
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='1' cy='1' r='1' fill='%2322d3ee' fill-opacity='0.1'/><circle cx='20' cy='20' r='0.7' fill='%23a78bfa' fill-opacity='0.07'/></svg>"),
        /* Carbon fiber weave — diagonal +45° */
        repeating-linear-gradient(45deg,
            transparent 0px,
            transparent 6px,
            rgba(255,255,255,0.018) 6px,
            rgba(255,255,255,0.018) 7px),
        /* Carbon fiber weave — diagonal -45° */
        repeating-linear-gradient(-45deg,
            transparent 0px,
            transparent 6px,
            rgba(255,255,255,0.018) 6px,
            rgba(255,255,255,0.018) 7px),
        /* Cyan atmospheric bloom — top-left */
        radial-gradient(ellipse 65% 50% at 18% 10%,
            rgba(34, 211, 238, 0.32) 0%,
            rgba(34, 211, 238, 0.12) 25%,
            transparent 65%),
        /* Purple atmospheric bloom — bottom-right */
        radial-gradient(ellipse 55% 45% at 88% 92%,
            rgba(124, 58, 237, 0.26) 0%,
            rgba(124, 58, 237, 0.1) 25%,
            transparent 65%),
        /* Center darkening for depth */
        radial-gradient(ellipse 70% 60% at 50% 50%,
            rgba(8, 14, 28, 0.55) 0%,
            transparent 75%),
        /* Deep base gradient */
        linear-gradient(180deg,
            #050505 0%,
            #0a1020 40%,
            #0a1020 60%,
            #050505 100%);
    background-size:
        40px 40px,
        12px 12px,
        12px 12px,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;
    z-index: 0;
}

/* Layer 2: animated chrome sweep — like light moving across a polished car body */
.rm-custom-bg::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 220%;
    height: 220%;
    background:
        linear-gradient(
            108deg,
            transparent 0%,
            transparent 38%,
            rgba(255, 255, 255, 0.03) 46%,
            rgba(255, 255, 255, 0.06) 50%,
            rgba(255, 255, 255, 0.03) 54%,
            transparent 62%,
            transparent 100%);
    transform: translateX(-30%);
    animation: rmCustomBgSweep 22s ease-in-out infinite alternate;
    will-change: transform;
    z-index: 2;
    pointer-events: none;
}

@keyframes rmCustomBgSweep {
    0%   { transform: translateX(-30%); }
    100% { transform: translateX(30%); }
}

@media (prefers-reduced-motion: reduce) {
    .rm-custom-bg::after { animation: none; transform: none; }
}

/* Apply soft fade-out mask at bottom of bg so heroes blend into next section */
.rm-custom-bg {
    -webkit-mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 65%,
        rgba(0,0,0,0.6) 88%,
        transparent 100%);
            mask-image: linear-gradient(
        180deg,
        #000 0%,
        #000 65%,
        rgba(0,0,0,0.6) 88%,
        transparent 100%);
}
/* Stronger top fade for finales (so they merge into prev section too) */
.rm-custom-bg-finale {
    -webkit-mask-image: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0,0,0,0.6) 12%,
        #000 35%,
        #000 65%,
        rgba(0,0,0,0.6) 88%,
        transparent 100%);
            mask-image: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0,0,0,0.6) 12%,
        #000 35%,
        #000 65%,
        rgba(0,0,0,0.6) 88%,
        transparent 100%);
}

/* HERO variant uses the default .rm-custom-bg base — no extra rules needed */

/* ---------- FINALE variant — focused single bloom, more dramatic ---------- */
.rm-custom-bg-finale::before {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='1' cy='1' r='1' fill='%2322d3ee' fill-opacity='0.1'/><circle cx='20' cy='20' r='0.7' fill='%23a78bfa' fill-opacity='0.07'/></svg>"),
        repeating-linear-gradient(45deg,
            transparent 0px,
            transparent 6px,
            rgba(255,255,255,0.018) 6px,
            rgba(255,255,255,0.018) 7px),
        repeating-linear-gradient(-45deg,
            transparent 0px,
            transparent 6px,
            rgba(255,255,255,0.018) 6px,
            rgba(255,255,255,0.018) 7px),
        /* Single dramatic centered bloom — cyan core fading into purple */
        radial-gradient(ellipse 75% 65% at 50% 50%,
            rgba(34, 211, 238, 0.3) 0%,
            rgba(124, 58, 237, 0.18) 25%,
            rgba(124, 58, 237, 0.05) 50%,
            transparent 75%),
        /* Edge vignette */
        radial-gradient(ellipse 100% 100% at 50% 50%,
            transparent 50%,
            rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(180deg,
            #050505 0%,
            #0a0f1c 50%,
            #050505 100%);
    background-size:
        40px 40px,
        12px 12px,
        12px 12px,
        100% 100%,
        100% 100%,
        100% 100%;
}

/* ---------- COMPACT variant — for mid-page sections (kontakt etc.) ---------- */

/* ---------- Override existing ambient classes when paired with rm-custom-bg ---------- */
/* Old classes have mix-blend-mode: screen + opacity animations that would
   destroy our solid dark bg. Force-reset them. */
.hero-ambient.rm-custom-bg,
.contact-ambient-bg.rm-custom-bg,
.finale-ambient-bg.rm-custom-bg {
    background-image: none !important;
    background-color: #050505 !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
    animation: none !important;
    inset: 0 !important;
    top: 0 !important;
}

/* Hide finale-overlay when custom bg is used (custom bg has its own vignette) */

/* =========================================================================
   v7 · 3D SVG DECORATIONS · AUTO DETAILING ICONOGRAPHY
   - Sleek sports car silhouette (auto detailing)
   - Water droplets with 3D shading (water beading on polished paint)
   - Goes inside .rm-custom-bg, between ::before bg and ::after chrome
   ========================================================================= */

/* CAR SILHOUETTE — sleek sports car, bottom of hero (watermark style) */

/* WATER DROPLETS — top of hero (the iconic detailing shot) */

/* CENNIK hero has offer card on right — push decor LEFT */

/* KONTAKT hero is centered — droplets on opposite corners */

/* Subtle floating animation for droplets (very slow, GPU-friendly) */

@keyframes rmDropletFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* Mobile: scale down + fade more */

/* =========================================================================
   v8 · CENNIK — MODERN FURIOUS · POLISHED CAR × BLUE-PURPLE FIRE
   Final layer · supersedes v1-v7 for cennik components.
   Brand gradient (cyan → blue → indigo → purple) · chrome sweeps ·
   glass cards · animated gradient borders · auto-detailing energy.
   ========================================================================= */

/* ---- A. EYEBROW — clean mono with brand-gradient diamond marker ---- */
.rm-pricing-hero-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}
.rm-eyebrow-mark {
    flex-shrink: 0;
}

/* ---- B. HERO ---- */

.rm-pricing-hero-container {
    grid-template-columns: 1.05fr 0.95fr !important;
    gap: clamp(2.5rem, 6vw, 5.5rem) !important;
}
.rm-pricing-hero-v3 .rm-pricing-hero-text { padding-right: 0; }

.rm-pricing-hero-v3 .rm-pricing-hero-headline em {
    font-style: italic !important;
    font-weight: 900 !important;
    background: linear-gradient(110deg, #22d3ee 0%, #67e8f9 18%, #3b82f6 35%, #ffffff 50%, #6366f1 65%, #7c3aed 82%, #a78bfa 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: rmChromeSweep 8s ease-in-out infinite !important;
}

/* ---- C. OFFER CARD — polished exotic-key feel ---- */
.rm-pricing-hero-v3 .rm-offer-card {
    position: relative;
}
.rm-pricing-hero-v3 .rm-offer-card::before {
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.rm-pricing-hero-v3 .rm-offer-card-gloss {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    border-radius: 1.75rem 1.75rem 60% 60% / 1.75rem 1.75rem 14% 14%;
    z-index: 0;
}
.rm-pricing-hero-v3 .rm-offer-card-edge {
    position: absolute;
    top: 1px; bottom: 1px; left: 1px;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0.5) 70%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.rm-pricing-hero-v3 .rm-offer-card-sheen {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}
.rm-pricing-hero-v3 .rm-offer-card-sheen::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.13) 50%, transparent 100%);
    transform: skewX(-18deg);
    animation: rmOfferSheen 9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes rmOfferSheen {
    0%, 18%   { left: -120%; }
    35%, 100% { left: 130%; }
}
.rm-pricing-hero-v3 .rm-offer-card > *:not(.rm-offer-card-gloss):not(.rm-offer-card-edge):not(.rm-offer-card-sheen) {
    position: relative;
    z-index: 3;
}

.rm-pricing-hero-v3 .rm-offer-card-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.rm-pricing-hero-v3 .rm-offer-card-pill-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 12px rgba(34,211,238,0.95);
    animation: rmDotPulse 2.4s ease-in-out infinite;
}
.rm-pricing-hero-v3 .rm-offer-card-price {
    display: flex;
}
.rm-pricing-hero-v3 .rm-offer-card-num {
    background-size: 250% 100% !important;
    transform: none !important;
}

.rm-pricing-hero-v3 .rm-offer-card-tagline {
    font-weight: 500;
}

.rm-pricing-hero-v3 .rm-offer-card-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.rm-pricing-hero-v3 .rm-offer-card-list li {
    display: flex;
    align-items: center;
    line-height: 1.4;
}
.rm-pricing-hero-v3 .rm-offer-card-list li i {
    flex-shrink: 0;
}
.rm-pricing-hero-v3 .rm-offer-card-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
}
.rm-pricing-hero-v3 .rm-offer-card-cta::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 70%; height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.rm-pricing-hero-v3 .rm-offer-card-cta:hover::before { left: 130%; }
.rm-pricing-hero-v3 .rm-offer-card-cta i {
    width: 16px;
    height: 16px;
    transition: transform 0.4s;
}

.rm-pricing-hero-v3 .rm-offer-card-fine {
    margin: 1rem 0 0;
}

/* Mobile hero */
@media (max-width: 880px) {
    .rm-pricing-hero-v3 .rm-pricing-hero-headline {
        font-size: clamp(2.4rem, 12vw, 3.6rem) !important;
    }
}

/* ---- D. CENNIK HERO BACKGROUND (richer blooms) ---- */

/* ---- E. FLOW SECTION (NEW · 4-step "How it works") ---- */
.rm-flow-section {
    position: relative;
    z-index: 1;
}
.rm-flow-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 4.5rem;
    padding: 0 1.5rem;
}
.rm-flow-title {
    margin: 0 0 1.25rem;
}
.rm-flow-title em {
    font-style: italic;
    font-weight: 900;
    background: linear-gradient(110deg, #22d3ee 0%, #67e8f9 18%, #3b82f6 35%, #ffffff 50%, #6366f1 65%, #7c3aed 82%, #a78bfa 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rmChromeSweep 8s ease-in-out infinite;
}
.rm-flow-desc {
    line-height: 1.65;
}
.rm-flow-grid {
    display: grid;
    align-items: stretch;
    margin: 0 auto;
}
.rm-flow-step {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Sequential brand-gradient border pulse — runs left→right, no hover interaction */
.rm-flow-step::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(34,211,238,0.85) 0%, rgba(167,139,250,0.85) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    animation: rmFlowBorderPulse 7s ease-in-out infinite;
}
.rm-flow-step:nth-child(1)::before { animation-delay: 0s; }
.rm-flow-step:nth-child(2)::before { animation-delay: 1.4s; }
.rm-flow-step:nth-child(3)::before { animation-delay: 2.8s; }
.rm-flow-step:nth-child(4)::before { animation-delay: 4.2s; }
@keyframes rmFlowBorderPulse {
    0%, 65%, 100% { opacity: 0; }
    20%, 45%     { opacity: 0.85; }
}

.rm-flow-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: rmFlowIconPulse 7s ease-in-out infinite;
}
.rm-flow-step:nth-child(1) .rm-flow-step-icon { animation-delay: 0s; }
.rm-flow-step:nth-child(2) .rm-flow-step-icon { animation-delay: 1.4s; }
.rm-flow-step:nth-child(3) .rm-flow-step-icon { animation-delay: 2.8s; }
.rm-flow-step:nth-child(4) .rm-flow-step-icon { animation-delay: 4.2s; }
@keyframes rmFlowIconPulse {
    0%, 65%, 100% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.18),
            0 4px 14px rgba(34,211,238,0.16);
        transform: scale(1);
        border-color: rgba(34,211,238,0.28);
    }
    25%, 40% {
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.32),
            0 6px 22px rgba(34,211,238,0.42),
            0 0 28px rgba(167,139,250,0.35);
        transform: scale(1.06);
        border-color: rgba(167,139,250,0.6);
    }
}

.rm-flow-step-title {
    line-height: 1.25;
}
.rm-flow-step-desc {
    margin: 0;
}
@media (max-width: 980px) {
    .rm-flow-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
}
@media (max-width: 560px) {
    .rm-flow-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .rm-flow-step::before,
    .rm-flow-step .rm-flow-step-icon { animation: none !important; }
}

/* ---- F. UPSELL CARDS · refined ---- */

.rm-upsells-v2 .rm-upsells-title {
    color: #f5f5f7 !important;
    margin: 0 0 1.25rem !important;
}
.rm-upsells-v2 .rm-upsells-title em {
    font-style: italic !important;
    font-weight: 900 !important;
    background: linear-gradient(110deg, #22d3ee 0%, #67e8f9 18%, #3b82f6 35%, #ffffff 50%, #6366f1 65%, #7c3aed 82%, #a78bfa 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: rmChromeSweep 8s ease-in-out infinite !important;
}
.rm-upsells-v2 .rm-upsells-desc {
    line-height: 1.65 !important;
}
.rm-upsells-v2 .rm-upsells-desc strong {
    color: #f5f5f7;
    font-weight: 700;
}
.rm-upsells-v2 .rm-upsells-note {
    display: block !important;
    text-align: center;
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
    text-transform: uppercase !important;
}

.rm-upsells-v2 .rm-upsell-card {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
.rm-upsells-v2 .rm-upsell-card::before {
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
}

.rm-upsells-v2 .rm-upsell-card:not(.is-on):hover::before { opacity: 0.7 !important; }

.rm-upsells-v2 .rm-upsell-card.is-on::before {
    opacity: 1 !important;
}

.rm-upsells-v2 .rm-upsell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.rm-upsells-v2 .rm-upsell-name {
    line-height: 1.3;
}

.rm-upsells-v2 .rm-upsell-price {
    margin-top: auto;
    align-items: baseline;
    gap: 0.25rem;
}
.rm-upsells-v2 .rm-upsell-price-num {
    letter-spacing: -0.03em !important;
}

.rm-upsells-v2 .rm-upsell-card.is-on::after {
    content: '✓' !important;
    position: absolute !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}
@keyframes rmCheckPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ---- G. CONFIGURATOR · refined ---- */

.rm-cfg-v2 .rm-cfg-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 4rem;
    padding: 0 1.5rem;
}
.rm-cfg-v2 .rm-cfg-title {
    line-height: 0.96 !important;
    color: #f5f5f7 !important;
    margin: 0 0 1.25rem !important;
}
.rm-cfg-v2 .rm-cfg-title em {
    font-style: italic !important;
    font-weight: 900 !important;
    background: linear-gradient(110deg, #22d3ee 0%, #67e8f9 18%, #3b82f6 35%, #ffffff 50%, #6366f1 65%, #7c3aed 82%, #a78bfa 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: rmChromeSweep 8s ease-in-out infinite !important;
}
.rm-cfg-v2 .rm-cfg-subtitle {
    line-height: 1.65 !important;
}

.rm-cfg-v2 .rm-cfg-block { margin-bottom: 0; }
.rm-cfg-v2 .rm-cfg-block-label {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-transform: uppercase !important;
    margin: 0 0 1.5rem !important;
}

.rm-cfg-v2 .rm-cfg-upsell-toggle {
    display: grid !important;
    align-items: center !important;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: #cbd5e1 !important;
}

.rm-cfg-v2 .rm-cfg-upsell-name {
    letter-spacing: -0.005em !important;
}

.rm-cfg-v2 .rm-cfg-upsell-price {
    letter-spacing: 0.02em !important;
}

/* Summary card */
.rm-cfg-summary-v2 {
    position: sticky !important;
    isolation: isolate;
}
.rm-cfg-summary-v2::before {
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.rm-cfg-summary-v2 .rm-cfg-summary-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}
.rm-eyebrow-dot.rm-dot-cyan {
    border-radius: 50%;
}
.rm-cfg-summary-v2 .rm-cfg-summary-plan {
    justify-content: space-between;
}
.rm-cfg-summary-v2 .rm-cfg-summary-plan-name {
    letter-spacing: -0.01em;
}
.rm-cfg-summary-v2 .rm-cfg-summary-plan-price {
    font-size: 1rem;
    font-weight: 800;
}
.rm-cfg-summary-v2 .rm-cfg-summary-upsells {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 60px;
}
.rm-cfg-summary-v2 .rm-cfg-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.88rem;
    color: #cbd5e1;
}
.rm-cfg-summary-v2 .rm-cfg-summary-row-name {
    font-weight: 500;
    flex: 1;
    padding-right: 0.5rem;
}
.rm-cfg-summary-v2 .rm-cfg-summary-row-price {
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-weight: 700;
    flex-shrink: 0;
}
.rm-cfg-summary-v2 .rm-cfg-summary-empty {
    font-style: italic;
    margin: 0;
}
.rm-cfg-summary-v2 .rm-cfg-summary-divider {
    height: 1px;
}
.rm-cfg-summary-v2 .rm-cfg-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.rm-cfg-summary-v2 .rm-cfg-summary-total-label {
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-weight: 700;
    text-transform: uppercase;
}

.rm-cfg-v2 .rm-cfg-cta {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    width: 100% !important;
    font-size: 0.97rem !important;
    text-decoration: none !important;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: none !important;
    margin: 0 !important;
}
.rm-cfg-v2 .rm-cfg-cta::before {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 70%; height: 100%;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100%);
    transform: skewX(-18deg);
    transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.rm-cfg-v2 .rm-cfg-cta:hover::before { left: 130%; }
.rm-cfg-v2 .rm-cfg-cta i {
    width: 16px !important;
    height: 16px !important;
    transition: transform 0.4s;
}

.rm-cfg-summary-v2 .rm-cfg-summary-note {
    text-align: center;
    margin: 1.1rem 0 0;
    letter-spacing: 0.01em;
}

@media (max-width: 880px) {
    .rm-cfg-v2 .rm-cfg-body { grid-template-columns: 1fr !important; }
    .rm-cfg-summary-v2 { position: static !important; }
}

/* ---- H. INCLUDED · refined bento ---- */

.rm-included-header {
    text-align: center;
}
.rm-included-title {
    line-height: 0.98 !important;
    color: #f5f5f7 !important;
    margin: 0 !important;
}
.rm-included-title em {
    font-style: italic;
    font-weight: 900;
    background: linear-gradient(110deg, #22d3ee 0%, #67e8f9 18%, #3b82f6 35%, #ffffff 50%, #6366f1 65%, #7c3aed 82%, #a78bfa 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rmChromeSweep 8s ease-in-out infinite;
}
.rm-included-section .rm-included-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    margin: 0 auto;
}
.rm-included-section .rm-included-card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.rm-included-section .rm-included-card::before {
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.rm-included-section .rm-included-card:hover::before { opacity: 1 !important; }
.rm-included-section .rm-included-icon {
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.rm-included-section .rm-included-name {
    letter-spacing: -0.015em;
    margin: 0;
}
.rm-included-section .rm-included-desc {
    margin: 0;
}
@media (max-width: 900px) {
    .rm-included-section .rm-included-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
    .rm-included-section .rm-included-grid { grid-template-columns: 1fr !important; }
}

/* ---- I. GUARANTEE · refined ---- */

.rm-guarantee-section .rm-guarantee-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.rm-guarantee-section .rm-guarantee-card::before {
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.rm-guarantee-section .rm-guarantee-icon {
    margin-bottom: 1.5rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- J. FINALE · cennik · dramatic ---- */

@keyframes rmFinalePulse {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

@keyframes rmFinaleRays {
    0%   { opacity: 0.35; transform: translateY(0); }
    100% { opacity: 0.65; transform: translateY(-4px); }
}

.rm-finale-section .rm-finale-headline {
    margin: 0 0 2.25rem !important;
}
.rm-finale-section .rm-finale-headline em {
    font-style: italic !important;
    font-weight: 900 !important;
    background: linear-gradient(110deg, #22d3ee 0%, #67e8f9 18%, #3b82f6 35%, #ffffff 50%, #6366f1 65%, #7c3aed 82%, #a78bfa 100%) !important;
    background-size: 220% 100% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: rmChromeSweep 8s ease-in-out infinite !important;
}

.rm-finale-section .rm-finale-spec-k {
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
}
.rm-finale-section .rm-finale-spec-v {
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
}
.rm-finale-section .rm-finale-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    justify-content: center !important;
    margin-top: 2.75rem !important;
}
@media (max-width: 600px) {
    .rm-finale-section .rm-finale-actions { flex-direction: column; align-items: stretch; }
    .rm-finale-section .rm-finale-actions .rm-glass-btn { width: 100%; }
}

/* GLASS BUTTONS in cennik finale — premium gradient + ghost */

.rm-finale-section .rm-glass-btn-primary::after {
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%) !important;
}

/* ---- K. Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .rm-pricing-hero-v3 .rm-offer-card-sheen::after,
    .rm-pricing-hero-v3 .rm-pricing-hero-headline em,
    .rm-pricing-hero-v3 .rm-offer-card-num,
    .rm-pricing-hero-v3 .rm-offer-card-pill-dot,
    .rm-flow-title em,
    .rm-upsells-v2 .rm-upsells-title em,
    .rm-upsells-v2 .rm-upsell-card.is-on::after,
    .rm-cfg-v2 .rm-cfg-title em,
    .rm-cfg-summary-v2 .rm-cfg-summary-total-num,
    .rm-included-title em,
    .rm-finale-section .rm-finale-headline em,
    .rm-decor-finale,
    .rm-decor-finale-rays,
    .rm-decor-orb-main,
    .rm-decor-orb-finale,
    .rm-eyebrow-dot.rm-dot-cyan {
        animation: none !important;
    }
}

/* =========================================================================
   v8.1 · CENNIK FIX — 3D orb decor + italic <em> clipping fix
   ========================================================================= */

/* ---- L. ITALIC <em> CLIP FIX ----
   Italic letters with descenders (j, y, g) + background-clip:text get cut
   both on the trailing slant (right) AND at the descender (bottom). The
   parent's tight line-height (0.95) makes the bottom clip worse. Fix:
   inline-block + bottom/right padding + slightly looser local line-height,
   compensated by negative margins so layout doesn't shift. */

/* Finale background — atmospheric bloom replaces the previously planned orb. */

/* =========================================================================
   v9 · CENNIK — ENTERPRISE CLEAN · BRAND DISCIPLINE
   Final layer for /cennik. Resets the busy v8 "Modern Furious" effects
   (chrome sweeps on italics, sheen sweeps, animated gradient borders,
   pulsing glows, glassmorphism overload) in favour of a calm, polished
   spec-sheet aesthetic. Brand gradient is reserved for ONE element
   (the configurator total) — everywhere else uses a single cyan accent.
   ========================================================================= */

:root {
    --rm-v9-bg:           #050608;
    --rm-v9-card:         #0d0f14;
    --rm-v9-card-hover:   #11141a;
    --rm-v9-line:         rgba(255, 255, 255, 0.07);
    --rm-v9-line-strong:  rgba(255, 255, 255, 0.14);
    --rm-v9-cyan:         #22d3ee;
    --rm-v9-cyan-soft:    #67e8f9;
    --rm-v9-text:         #f5f5f7;
    --rm-v9-text-2:       #cbd5e1;
    --rm-v9-text-3:       #94a3b8;
    --rm-v9-muted:        #5b6577;
}

/* ---- A. Kill the v8 noise (chrome sweeps, sheens, pulses, gradient borders) ---- */

/* Italic emphasis becomes plain cyan italic — no gradient, no animation.
   This also incidentally fixes any remaining descender clipping (no
   background-clip: text means no glyph paint area issues). */
.rm-pricing-hero-v3 .rm-pricing-hero-headline em,
.rm-flow-title em,
.rm-upsells-v2 .rm-upsells-title em,
.rm-cfg-v2 .rm-cfg-title em,
.rm-included-title em,
.rm-finale-section .rm-finale-headline em {
    margin: 0 !important;
}

/* Hero offer-card: drop the gloss / sheen / edge / pulsing dot stack */
.rm-pricing-hero-v3 .rm-offer-card-sheen,
.rm-pricing-hero-v3 .rm-offer-card-gloss,
.rm-pricing-hero-v3 .rm-offer-card-edge,
.rm-pricing-hero-v3 .rm-offer-card-pill-dot {
    display: none !important;
}

/* Kill the gradient-border + glow pulse animations on cards */
.rm-flow-step::before,
.rm-upsells-v2 .rm-upsell-card::before,
.rm-cfg-summary-v2::before,
.rm-included-section .rm-included-card::before,
.rm-guarantee-section .rm-guarantee-card::before {
    animation: none !important;
    opacity: 0 !important;
    display: none !important;
}
.rm-flow-step .rm-flow-step-icon {
    animation: none !important;
    transform: none !important;
}
/* CFG total keeps its brand gradient (it's the only place we use it) but
   no chrome sweep animation. */
.rm-cfg-summary-v2 .rm-cfg-summary-total-num {
    animation: none !important;
}

/* ---- B. CENNIK HERO ---- */

.rm-pricing-hero-eyebrow {
    color: var(--rm-v9-text-3) !important;
    letter-spacing: 0.24em !important;
    font-size: 0.7rem !important;
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
    margin: 0 0 1.75rem !important;
}

.rm-pricing-hero-v3 .rm-pricing-hero-headline {
    font-weight: 900 !important;
    line-height: 0.96 !important;
    letter-spacing: -0.045em !important;
    color: var(--rm-v9-text) !important;
}
.rm-pricing-hero-v3 .rm-pricing-hero-lead {
    color: var(--rm-v9-text-3) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    max-width: 520px !important;
}
.rm-pricing-hero-v3 .rm-pricing-hero-lead strong {
    color: var(--rm-v9-text) !important;
    font-weight: 700 !important;
}

/* Keypoints become a clean spec-strip with vertical dividers */
.rm-pricing-hero-keypoints {
    flex-wrap: wrap !important;
    margin-top: 0.25rem !important;
    border-top: 1px solid var(--rm-v9-line) !important;
    border-bottom: 1px solid var(--rm-v9-line) !important;
}

.rm-pricing-hero-kp + .rm-pricing-hero-kp { border-left: 1px solid var(--rm-v9-line) !important; }

/* ---- C. OFFER CARD · enterprise spec sheet ---- */
.rm-pricing-hero-v3 .rm-offer-card {
    overflow: hidden;
    isolation: isolate;
}
/* Replace v8's mask-gradient border with a single 2px cyan accent line at top */
.rm-pricing-hero-v3 .rm-offer-card::before {
    content: '' !important;
    position: absolute !important;
    inset: auto !important;
}

/* Top row: label on the left, serial number on the right */
.rm-pricing-hero-v3 .rm-offer-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--rm-v9-line) !important;
}
.rm-pricing-hero-v3 .rm-offer-card-pill {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
    font-size: 0.64rem !important;
    color: var(--rm-v9-cyan) !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
.rm-pricing-hero-v3 .rm-offer-card-top::after {
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 0.62rem;
    color: var(--rm-v9-muted);
    letter-spacing: 0.18em;
    font-weight: 500;
}

.rm-pricing-hero-v3 .rm-offer-card-num {
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.06em !important;
}
.rm-pricing-hero-v3 .rm-offer-card-currency {
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.1em !important;
    font-weight: 600 !important;
}
.rm-pricing-hero-v3 .rm-offer-card-period {
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
    font-size: 0.7rem !important;
    color: var(--rm-v9-muted) !important;
    font-weight: 500 !important;
    letter-spacing: 0.06em !important;
}
.rm-pricing-hero-v3 .rm-offer-card-tagline {
    color: var(--rm-v9-text-3) !important;
    font-style: normal !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
}
.rm-pricing-hero-v3 .rm-offer-card-divider {
    background: var(--rm-v9-line) !important;
    height: 1px !important;
}

.rm-pricing-hero-v3 .rm-offer-card-list li {
    font-size: 0.92rem !important;
    gap: 0.75rem !important;
}
.rm-pricing-hero-v3 .rm-offer-card-list li i {
    width: 15px !important;
    height: 15px !important;
    color: var(--rm-v9-cyan) !important;
    stroke-width: 2.5 !important;
    filter: none !important;
}
.rm-pricing-hero-v3 .rm-offer-card-cta {
    padding: 1rem 1.5rem !important;
    border-radius: 0.6rem !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
}
.rm-pricing-hero-v3 .rm-offer-card-cta::before { display: none !important; }

.rm-pricing-hero-v3 .rm-offer-card-cta:hover i { transform: none !important; }
.rm-pricing-hero-v3 .rm-offer-card-fine {
    text-align: left !important;
    font-size: 0.72rem !important;
    color: var(--rm-v9-muted) !important;
    letter-spacing: 0 !important;
    font-family: 'Inter', sans-serif !important;
}

/* ---- D. FLOW · clean datasheet row (no card backgrounds, hairline dividers) ---- */
.rm-flow-section { padding: clamp(5rem, 9vw, 8rem) 0 !important; }
.rm-flow-header { margin-bottom: 3.5rem !important; }
.rm-flow-title {
    font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    line-height: 0.98 !important;
    color: var(--rm-v9-text) !important;
}
.rm-flow-desc { color: var(--rm-v9-text-3) !important; font-size: 1rem !important; }

.rm-flow-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    border-top: 1px solid var(--rm-v9-line) !important;
    border-bottom: 1px solid var(--rm-v9-line) !important;
    padding: 0 !important;
    max-width: 1280px !important;
}
.rm-flow-step {
    padding: 2.5rem 1.85rem !important;
    background: none !important;
    border: none !important;
    border-right: 1px solid var(--rm-v9-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.rm-flow-step:last-child { border-right: none !important; }

.rm-flow-step-title {
    font-weight: 700 !important;
    color: var(--rm-v9-text) !important;
    letter-spacing: -0.01em !important;
}
.rm-flow-step-desc {
    color: var(--rm-v9-text-3) !important;
}

@media (max-width: 980px) {
    .rm-flow-grid { grid-template-columns: 1fr 1fr !important; }
    .rm-flow-step:nth-child(odd) { border-right: 1px solid var(--rm-v9-line) !important; }
    .rm-flow-step:nth-child(even) { border-right: none !important; }
    .rm-flow-step:nth-child(1),
    .rm-flow-step:nth-child(2) { border-bottom: 1px solid var(--rm-v9-line) !important; }
}
@media (max-width: 560px) {
    .rm-flow-grid { grid-template-columns: 1fr !important; }
    .rm-flow-step { border-right: none !important; border-bottom: 1px solid var(--rm-v9-line) !important; }
    .rm-flow-step:last-child { border-bottom: none !important; }
}

/* ---- E. UPSELLS · flat dark cards, single accent ---- */
.rm-upsells-section { padding: clamp(5rem, 9vw, 8rem) 0 !important; }
.rm-upsells-v2 .rm-upsells-header { margin-bottom: 3.5rem !important; padding: 0 1.5rem !important; }
.rm-upsells-v2 .rm-upsells-title {
    font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    line-height: 0.98 !important;
}
.rm-upsells-v2 .rm-upsells-desc {
    color: var(--rm-v9-text-3) !important;
    font-size: 1rem !important;
}
.rm-upsells-grid {
    gap: 1rem !important;
    max-width: 1280px !important;
}

.rm-upsells-v2 .rm-upsell-card {
    padding: 1.5rem !important;
    cursor: pointer !important;
    gap: 0.85rem !important;
}
.rm-upsells-v2 .rm-upsell-card:not(.is-on):hover {
    border-color: var(--rm-v9-line-strong) !important;
}
.rm-upsells-v2 .rm-upsell-card.is-on {
    border-color: var(--rm-v9-cyan) !important;
}
.rm-upsells-v2 .rm-upsell-icon {
    transform: none !important;
}
.rm-upsells-v2 .rm-upsell-card.is-on .rm-upsell-icon {
    border-color: var(--rm-v9-cyan) !important;
}
.rm-upsells-v2 .rm-upsell-card:hover .rm-upsell-icon { transform: none !important; }

.rm-upsells-v2 .rm-upsell-name {
    font-size: 0.98rem !important;
    color: var(--rm-v9-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
}
.rm-upsells-v2 .rm-upsell-desc {
    color: var(--rm-v9-text-3) !important;
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
}
.rm-upsells-v2 .rm-upsell-price {
    border-top: 1px solid var(--rm-v9-line) !important;
    border-top-style: solid !important;
    padding-top: 0.85rem !important;
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
}

.rm-upsells-v2 .rm-upsell-price-plus {
    font-size: 1rem !important;
    font-weight: 700 !important;
}
.rm-upsells-v2 .rm-upsell-price-unit {
    font-size: 0.58rem !important;
    color: var(--rm-v9-muted) !important;
    letter-spacing: 0.18em !important;
    margin-left: 0.4rem !important;
}
.rm-upsells-v2 .rm-upsell-card.is-on::after {
    border-radius: 50% !important;
}
.rm-upsells-v2 .rm-upsells-note {
    margin-top: 2.5rem !important;
    color: var(--rm-v9-muted) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.16em !important;
}

/* ---- F. CONFIGURATOR · invoice-style ---- */
.rm-cfg-v2 { padding: clamp(5rem, 9vw, 8rem) 0 !important; }
.rm-cfg-v2 .rm-cfg-header { margin-bottom: 3.5rem !important; }
.rm-cfg-v2 .rm-cfg-title {
    font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
}
.rm-cfg-v2 .rm-cfg-subtitle { color: var(--rm-v9-text-3) !important; font-size: 1rem !important; }
.rm-cfg-v2 .rm-cfg-body {
    grid-template-columns: 1.3fr 1fr !important;
    gap: 2rem !important;
    max-width: 1240px !important;
}

.rm-cfg-v2 .rm-cfg-block-label {
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
    font-size: 0.66rem !important;
    color: var(--rm-v9-muted) !important;
    letter-spacing: 0.22em !important;
    font-weight: 700 !important;
}

/* Toggle list: one bordered container, separated rows */
.rm-cfg-v2 .rm-cfg-upsells-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.rm-cfg-v2 .rm-cfg-upsell-toggle {
    padding: 1rem 1.25rem !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background 0.18s !important;
    grid-template-columns: 22px 1fr auto !important;
    gap: 0.95rem !important;
}
.rm-cfg-v2 .rm-cfg-upsells-list > .rm-cfg-upsell-toggle:last-child { border-bottom: none !important; }
.rm-cfg-v2 .rm-cfg-upsell-toggle:hover {
    transform: none !important;
    border-color: transparent var(--rm-v9-line) !important;
    box-shadow: none !important;
}
.rm-cfg-v2 .rm-cfg-upsell-toggle.is-on {
    border-color: transparent var(--rm-v9-line) !important;
    color: var(--rm-v9-text) !important;
}
.rm-cfg-v2 .rm-cfg-upsell-toggle i { color: var(--rm-v9-cyan) !important; width: 18px !important; height: 18px !important; }
.rm-cfg-v2 .rm-cfg-upsell-name { font-size: 0.92rem !important; color: var(--rm-v9-text-2) !important; font-weight: 500 !important; }
.rm-cfg-v2 .rm-cfg-upsell-toggle.is-on .rm-cfg-upsell-name { color: var(--rm-v9-text) !important; font-weight: 700 !important; }
.rm-cfg-v2 .rm-cfg-upsell-price {
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
    color: var(--rm-v9-cyan) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

/* Summary card: invoice */
.rm-cfg-summary-v2 {
    padding: 1.75rem !important;
    top: 100px !important;
}
.rm-cfg-summary-v2 .rm-cfg-summary-label {
    color: var(--rm-v9-cyan) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.24em !important;
    margin: 0 0 1.5rem !important;
}

.rm-cfg-summary-v2 .rm-cfg-summary-plan {
    border-bottom: 1px solid var(--rm-v9-line) !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
}
.rm-cfg-summary-v2 .rm-cfg-summary-plan-name {
    color: var(--rm-v9-text) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}
.rm-cfg-summary-v2 .rm-cfg-summary-plan-price {
    color: var(--rm-v9-text) !important;
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
}
.rm-cfg-summary-v2 .rm-cfg-summary-row-name { color: var(--rm-v9-text-2) !important; font-size: 0.86rem !important; }
.rm-cfg-summary-v2 .rm-cfg-summary-row-price { color: var(--rm-v9-cyan) !important; font-size: 0.84rem !important; }
.rm-cfg-summary-v2 .rm-cfg-summary-empty { color: var(--rm-v9-muted) !important; font-size: 0.82rem !important; }
.rm-cfg-summary-v2 .rm-cfg-summary-divider {
    background: var(--rm-v9-line) !important;
    margin: 1.25rem 0 !important;
}
.rm-cfg-summary-v2 .rm-cfg-summary-total {
    margin-bottom: 1.5rem !important;
}
.rm-cfg-summary-v2 .rm-cfg-summary-total-label {
    color: var(--rm-v9-text-3) !important;
    font-size: 0.66rem !important;
    letter-spacing: 0.22em !important;
}
/* THE one place we use the brand gradient — clean, no animation */
.rm-cfg-summary-v2 .rm-cfg-summary-total-num {
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    background-size: auto !important;
}
.rm-cfg-v2 .rm-cfg-cta {
    padding: 1rem 1.5rem !important;
    border-radius: 0.6rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
}
.rm-cfg-v2 .rm-cfg-cta::before { display: none !important; }

.rm-cfg-v2 .rm-cfg-cta:hover i { transform: none !important; }
.rm-cfg-summary-v2 .rm-cfg-summary-note {
    color: var(--rm-v9-muted) !important;
    font-size: 0.72rem !important;
    line-height: 1.55 !important;
}

/* ---- G. INCLUDED · flat grid ---- */
.rm-included-section { padding: clamp(5rem, 9vw, 8rem) 0 !important; }
.rm-included-header { margin-bottom: 3.5rem !important; }
.rm-included-title {
    font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
}
.rm-included-section .rm-included-grid { gap: 1rem !important; max-width: 1280px !important; }
.rm-included-section .rm-included-card {
    padding: 1.65rem !important;
    gap: 0.9rem !important;
}
.rm-included-section .rm-included-card:hover {
    border-color: var(--rm-v9-line-strong) !important;
}

.rm-included-section .rm-included-icon {
    transform: none !important;
    margin-bottom: 0.15rem !important;
}

.rm-included-section .rm-included-name {
    color: var(--rm-v9-text) !important;
    font-size: 0.96rem !important;
    font-weight: 700 !important;
}
.rm-included-section .rm-included-desc {
    color: var(--rm-v9-text-3) !important;
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
}

/* ---- H. GUARANTEE · simple horizontal block ---- */
.rm-guarantee-section { padding: clamp(4rem, 8vw, 7rem) 0 !important; }
.rm-guarantee-section .rm-guarantee-card {
    max-width: 820px !important;
    padding: 2.25rem 2.5rem !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.85rem !important;
    text-align: left !important;
}
.rm-guarantee-section .rm-guarantee-icon {
    flex-shrink: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
}

.rm-guarantee-section .rm-guarantee-title {
    font-size: clamp(1.4rem, 2.6vw, 1.8rem) !important;
    color: var(--rm-v9-text) !important;
    margin: 0 0 0.4rem !important;
    letter-spacing: -0.02em !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}
.rm-guarantee-section .gradient-titanium-text {
    animation: none !important;
}
.rm-guarantee-section .rm-guarantee-desc {
    color: var(--rm-v9-text-3) !important;
    font-size: 0.92rem !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    max-width: none !important;
}
@media (max-width: 720px) {
    .rm-guarantee-section .rm-guarantee-card {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1.25rem !important;
        padding: 2rem 1.5rem !important;
    }
}

/* ---- I. FINALE · calm + confident ---- */
.rm-finale-section { padding: clamp(7rem, 13vw, 11rem) 0 !important; }
.rm-finale-section .rm-finale-headline {
    font-weight: 900 !important;
    letter-spacing: -0.045em !important;
    line-height: 0.96 !important;
    color: var(--rm-v9-text) !important;
}

.rm-finale-section .rm-glass-btn-primary {
    font-weight: 700 !important;
    letter-spacing: 0.005em !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.rm-finale-section .rm-glass-btn-primary::before,
.rm-finale-section .rm-glass-btn-primary::after { display: none !important; }

.rm-finale-section .rm-glass-btn-ghost {
    background: transparent !important;
    border: 1px solid var(--rm-v9-line-strong) !important;
    color: var(--rm-v9-text) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.rm-finale-section .rm-glass-btn-ghost::before,
.rm-finale-section .rm-glass-btn-ghost::after { display: none !important; }
.rm-finale-section .rm-glass-btn-ghost:hover {
    border-color: var(--rm-v9-cyan) !important;
    background: rgba(34, 211, 238, 0.04) !important;
    transform: none !important;
    color: var(--rm-v9-text) !important;
}
.rm-finale-section .rm-glass-btn-primary:hover i,
.rm-finale-section .rm-glass-btn-ghost:hover i { transform: none !important; }

/* ---- J. Mobile hero stack ---- */
@media (max-width: 880px) {
    .rm-pricing-hero-container { grid-template-columns: 1fr !important; gap: 3rem !important; }
    .rm-pricing-hero-v3 .rm-offer-card { padding: 2rem !important; }
}

/* =========================================================================
   v10 · CENNIK — BRAND ALIVE
   v9's spec-sheet discipline stays — but the RM logo gradient
   (cyan #22d3ee → blue #3b82f6 → indigo #6366f1 → purple #7c3aed) comes
   back to the moments that sell. Bigger icons, massive step numbers,
   gradient CTAs. The page reads less, looks more. Premium auto-detailing.
   ========================================================================= */

:root {
    --rm-grad:        linear-gradient(135deg, #22d3ee 0%, #3b82f6 35%, #6366f1 65%, #7c3aed 100%);
    --rm-grad-hover:  linear-gradient(135deg, #67e8f9 0%, #60a5fa 35%, #818cf8 65%, #a78bfa 100%);
    --rm-grad-soft:   linear-gradient(135deg, rgba(34,211,238,0.16) 0%, rgba(99,102,241,0.14) 50%, rgba(124,58,237,0.16) 100%);
    --rm-glow-purple: rgba(99, 102, 241, 0.32);
}

/* ---- 1. ITALIC EM · full brand gradient, static (no chrome animation) ---- */
.rm-pricing-hero-v3 .rm-pricing-hero-headline em,
.rm-flow-title em,
.rm-upsells-v2 .rm-upsells-title em,
.rm-cfg-v2 .rm-cfg-title em,
.rm-included-title em,
.rm-finale-section .rm-finale-headline em {
    display: inline-block !important;
    padding: 0 0.12em 0.16em 0.02em !important;
    margin-right: -0.04em !important;
    margin-bottom: -0.14em !important;
    line-height: 1.05 !important;
    background: var(--rm-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-style: italic !important;
    font-weight: inherit !important;
    overflow: visible !important;
    animation: none !important;
    vertical-align: baseline !important;
}

/* ---- 2. OFFER CARD ---- */
/* Top accent line: gradient (was cyan-only in v9) */

/* Price number: gradient like the M in the logo */
.rm-pricing-hero-v3 .rm-offer-card-num {
    background: var(--rm-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: none !important;
    text-shadow: none !important;
}
/* Offer card CTA: gradient (the brand "buy" moment) */
.rm-pricing-hero-v3 .rm-offer-card-cta {
    background: var(--rm-grad) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 14px 32px var(--rm-glow-purple), inset 0 1px 0 rgba(255,255,255,0.22) !important;
    transition: background 0.25s, box-shadow 0.25s, transform 0.25s !important;
}
.rm-pricing-hero-v3 .rm-offer-card-cta:hover {
    background: var(--rm-grad-hover) !important;
    box-shadow: 0 18px 40px rgba(99,102,241,0.42), inset 0 1px 0 rgba(255,255,255,0.32) !important;
    transform: translateY(-2px) !important;
}

/* ---- 3. SECTION EYEBROW MARK · gradient diamond, more brand ---- */
.rm-eyebrow-mark {
    background: var(--rm-grad) !important;
    transform: rotate(45deg) !important;
    border-radius: 2px !important;
    width: 9px !important;
    height: 9px !important;
    box-shadow: 0 0 14px rgba(99, 102, 241, 0.55) !important;
}
.rm-eyebrow-dot.rm-dot-cyan {
    background: var(--rm-grad) !important;
    width: 8px !important;
    height: 8px !important;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.65) !important;
    animation: none !important;
}

/* ---- 4. FLOW STEPS · massive gradient numbers as the visual anchor ---- */
.rm-flow-step-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin-bottom: 1.25rem !important;
}
.rm-flow-step-n {
    font-family: 'Inter', sans-serif !important;
    font-size: 2.75rem !important;       /* was 0.7rem — now the visual hero */
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    background: var(--rm-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    line-height: 0.9 !important;
}
.rm-flow-step-icon {
    width: 36px !important;
    height: 36px !important;
}
.rm-flow-step-icon i { width: 18px !important; height: 18px !important; }
.rm-flow-step-title {
    font-size: 1.05rem !important;
    margin: 0 0 0.6rem !important;
}
.rm-flow-step-desc { font-size: 0.86rem !important; line-height: 1.55 !important; }

/* ---- 5. UPSELL CARDS · bigger gradient icons + gradient selected state ---- */
.rm-upsells-v2 .rm-upsell-icon {
    width: 52px !important;
    height: 52px !important;
}
.rm-upsells-v2 .rm-upsell-icon i { width: 24px !important; height: 24px !important; }
.rm-upsells-v2 .rm-upsell-price-num {
    font-size: 1.75rem !important;
    background: var(--rm-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
}
.rm-upsells-v2 .rm-upsell-price-plus {
    background: var(--rm-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
/* Selected: gradient border via padding-box/border-box trick */

/* ---- 6. CONFIGURATOR · block num + selected toggle ---- */

.rm-cfg-v2 .rm-cfg-upsell-toggle.is-on {
    border-image: var(--rm-grad) 1 !important;
    border-left: 3px solid transparent !important;
    border-image-slice: 1 !important;
}
/* Simpler: just gradient left accent via box-shadow with gradient image isn't supported.
   Use inset cyan that morphs to purple via pseudo */
.rm-cfg-v2 .rm-cfg-upsell-toggle.is-on {
    border: none !important;
    border-bottom: 1px solid var(--rm-v9-line) !important;
    box-shadow: inset 3px 0 0 0 #6366f1 !important;
    position: relative !important;
}
.rm-cfg-v2 .rm-cfg-upsell-toggle.is-on::before {
    content: '' !important;
    position: absolute !important;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--rm-grad) !important;
}
/* CFG total: gradient (already), make it slightly bigger for more impact */
.rm-cfg-summary-v2 .rm-cfg-summary-total-num {
    font-size: 2.4rem !important;
}
.rm-cfg-v2 .rm-cfg-cta {
    background: var(--rm-grad) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 32px var(--rm-glow-purple), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.rm-cfg-v2 .rm-cfg-cta:hover {
    background: var(--rm-grad-hover) !important;
    box-shadow: 0 18px 40px rgba(99,102,241,0.42), inset 0 1px 0 rgba(255,255,255,0.32) !important;
    transform: translateY(-2px) !important;
}

/* ---- 7. INCLUDED · bigger gradient icons ---- */
.rm-included-section .rm-included-icon {
    width: 48px !important;
    height: 48px !important;
}
.rm-included-section .rm-included-icon i { width: 22px !important; height: 22px !important; }
.rm-included-section .rm-included-card:hover .rm-included-icon {
    border-color: rgba(99, 102, 241, 0.5) !important;
}

/* ---- 8. GUARANTEE · bigger gradient icon ring + gradient title ---- */
.rm-guarantee-section .rm-guarantee-icon {
    width: 76px !important;
    height: 76px !important;
    color: #ffffff !important;
}
.rm-guarantee-section .rm-guarantee-icon i { width: 32px !important; height: 32px !important; }
.rm-guarantee-section .gradient-titanium-text {
    background: var(--rm-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* ---- 9. FINALE · gradient back ---- */
.rm-finale-section .rm-finale-spec-v {
    background: var(--rm-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.rm-finale-section .rm-glass-btn-primary {
    background: var(--rm-grad) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
}
.rm-finale-section .rm-glass-btn-primary:hover {
    background: var(--rm-grad-hover) !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
}

/* ---- 10. ATMOSPHERIC BACKGROUNDS · cyan + indigo + purple (not just cyan) ---- */
.rm-custom-bg-cennik::before {
    background:
        radial-gradient(ellipse 65% 50% at 12% 8%,  rgba(34, 211, 238, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 88% 92%, rgba(124, 58, 237, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 70% 35% at 50% 50%, rgba(99, 102, 241, 0.10) 0%, transparent 65%),
        #050608 !important;
    background-size: 100% 100% !important;
}
.rm-custom-bg-cennik-finale::before {
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%,   rgba(34, 211, 238, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 65% 50% at 50% 100%, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 80% 45% at 50% 50%,  rgba(99, 102, 241, 0.10) 0%, transparent 70%),
        #050608 !important;
    background-size: 100% 100% !important;
}

/* ---- 11. KEY visual rebalance ----
   Section headlines bigger, leads tighter — more visual weight per word. */
.rm-flow-title,
.rm-upsells-v2 .rm-upsells-title,
.rm-cfg-v2 .rm-cfg-title,
.rm-included-title {
    font-size: clamp(2.6rem, 5.5vw, 4rem) !important;
}
.rm-pricing-hero-v3 .rm-pricing-hero-headline {
    font-size: clamp(3.2rem, 7.5vw, 6rem) !important;
}
.rm-finale-section .rm-finale-headline {
    font-size: clamp(3rem, 7.5vw, 5.6rem) !important;
}
.rm-flow-desc,
.rm-upsells-v2 .rm-upsells-desc,
.rm-cfg-v2 .rm-cfg-subtitle {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- 12. HERO offer card — slightly more presence ---- */

/* =========================================================================
   v11 · CENNIK — GLASS REFINEMENT
   Drop solid borders. Every card and icon-box becomes a frosted glass
   panel: linear-gradient body + inset top-edge highlight + outer drop
   shadow + ::before/::after gradient shine overlay. The whole card
   "lifts off" the dark bg via shadow, no border line needed.
   Plus: "od" prefix on the price, fix for the trailing "9" clipping,
   and a centered glass spec-bar for the keypoints below the hero columns.
   ========================================================================= */

/* ---- 1. PRICE · "od" prefix + trailing-"9" clip fix ---- */
.rm-pricing-hero-v3 .rm-offer-card-price {
    align-items: flex-end !important;
    gap: 0.5rem !important;
}
.rm-pricing-hero-v3 .rm-offer-card-from {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    padding-bottom: 0.55em;
}
.rm-pricing-hero-v3 .rm-offer-card-num {
    display: inline-block !important;
    padding-right: 0.1em !important;
    margin-right: -0.06em !important;
    line-height: 0.9 !important;
}

/* ---- 2. GLASS CARD PATTERN ---- */
/* HERO OFFER CARD — glass + keep top cyan accent line as signature */
.rm-pricing-hero-v3 .rm-offer-card {
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}
/* ::before stays as the cyan top accent line (signature of the hero card) */
.rm-pricing-hero-v3 .rm-offer-card::before {
    background: var(--rm-grad) !important;
    height: 2px !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    opacity: 0.95 !important;
    z-index: 2 !important;
    -webkit-mask: none !important;
    mask: none !important;
}
/* ::after = subtle gradient shine overlay across the whole card */
.rm-pricing-hero-v3 .rm-offer-card::after {
    content: '' !important;
    position: absolute !important;
    pointer-events: none !important;
    z-index: 0 !important;
    display: block !important;
}
.rm-pricing-hero-v3 .rm-offer-card > * {
    position: relative;
    z-index: 1;
}

/* HERO KEYPOINTS BAR — centered glass strip below columns */
.rm-pricing-hero-keypoints {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    padding: 0 !important;
    max-width: 880px !important;
    border: none !important;
    position: relative;
}
.rm-pricing-hero-keypoints::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.rm-pricing-hero-kp {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.9rem, 1.3vw, 1rem) !important;
    font-weight: 600 !important;
    color: #f5f5f7 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    position: relative !important;
    z-index: 1 !important;
}
.rm-pricing-hero-kp:first-child { border-left: none !important; }
.rm-pricing-hero-kp i {
    width: 18px !important;
    height: 18px !important;
    color: #67e8f9 !important;
    flex-shrink: 0 !important;
}
@media (max-width: 640px) {
    .rm-pricing-hero-keypoints {
        flex-direction: column !important;
        max-width: 360px !important;
    }
    .rm-pricing-hero-kp {
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 0.9rem 1.5rem !important;
    }
    .rm-pricing-hero-kp:first-child { border-top: none !important; }
}

/* UPSELL CARDS — glass */

.rm-upsells-v2 .rm-upsell-card::before {
    inset: 0 !important;
}
.rm-upsells-v2 .rm-upsell-card > * { position: relative !important; z-index: 1 !important; }

/* CONFIG SUMMARY CARD — glass */
.rm-cfg-summary-v2 {
    border: none !important;
    border-radius: 1rem !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    overflow: hidden !important;
}
.rm-cfg-summary-v2::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 1 !important;
    border-radius: 1rem !important;
    padding: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    display: block !important;
}
.rm-cfg-summary-v2 > * { position: relative !important; z-index: 1 !important; }

/* CONFIGURATOR TOGGLE LIST — glass container */
.rm-cfg-v2 .rm-cfg-upsells-list {
    border: none !important;
    border-radius: 1rem !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    overflow: hidden !important;
    position: relative !important;
    isolation: isolate !important;
}
.rm-cfg-v2 .rm-cfg-upsells-list::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.rm-cfg-v2 .rm-cfg-upsell-toggle {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.rm-cfg-v2 .rm-cfg-upsell-toggle:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}
.rm-cfg-v2 .rm-cfg-upsell-toggle.is-on {
    background: linear-gradient(135deg, rgba(34,211,238,0.08) 0%, rgba(124,58,237,0.06) 100%) !important;
}

/* INCLUDED CARDS — glass */
.rm-included-section .rm-included-card {
    border: none !important;
    border-radius: 1rem !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
    transition: background 0.25s, box-shadow 0.25s, transform 0.25s !important;
}
.rm-included-section .rm-included-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 1 !important;
    border-radius: 1rem !important;
    padding: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    display: block !important;
}
.rm-included-section .rm-included-card > * { position: relative !important; z-index: 1 !important; }

/* GUARANTEE CARD — glass + keep gradient icon ring */
.rm-guarantee-section .rm-guarantee-card {
    border: none !important;
    border-radius: 1.1rem !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}
.rm-guarantee-section .rm-guarantee-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 1 !important;
    border-radius: 1.1rem !important;
    padding: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    display: block !important;
}
.rm-guarantee-section .rm-guarantee-card > * { position: relative !important; z-index: 1 !important; }

/* FINALE SPEC STRIP — glass */
.rm-finale-section .rm-finale-spec-strip {
    border: none !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

/* ---- 3. GLASS ICON-BOXES ---- */
/* Upsell icons */
.rm-upsells-v2 .rm-upsell-icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.22),
        0 6px 16px rgba(0, 0, 0, 0.4) !important;
    color: #67e8f9 !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
.rm-upsells-v2 .rm-upsell-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.05) 100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 12px !important;
}
.rm-upsells-v2 .rm-upsell-icon i {
    position: relative !important;
    z-index: 1 !important;
    color: #67e8f9 !important;
}

/* Included icons */
.rm-included-section .rm-included-icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.22),
        0 6px 16px rgba(0, 0, 0, 0.4) !important;
    color: #67e8f9 !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
.rm-included-section .rm-included-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.05) 100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 12px !important;
}
.rm-included-section .rm-included-icon i {
    position: relative !important;
    z-index: 1 !important;
    color: #67e8f9 !important;
}
.rm-included-section .rm-included-card:hover .rm-included-icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    border: none !important;
}

/* Flow step icon */
.rm-flow-step-icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: none !important;
    border-radius: 9px !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.35) !important;
    color: #67e8f9 !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
.rm-flow-step-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.05) 100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 9px !important;
}
.rm-flow-step-icon i {
    position: relative !important;
    z-index: 1 !important;
    color: #67e8f9 !important;
}

/* Guarantee icon — keep the gradient ring (it's the focal element) */
.rm-guarantee-section .rm-guarantee-icon {
    border: 2px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
.rm-guarantee-section .rm-guarantee-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.05) 100%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 50% !important;
}
.rm-guarantee-section .rm-guarantee-icon i {
    position: relative !important;
    z-index: 1 !important;
    color: #ffffff !important;
}

/* CFG block num — keep gradient ring (small accent) */

/* ---- 4. Reduced motion hint (just transform/transitions, glass is OK) ---- */
@media (prefers-reduced-motion: reduce) {
    .rm-upsells-v2 .rm-upsell-card,
    .rm-included-section .rm-included-card {
        transition: none !important;
    }
}

/* =========================================================================
   v12 · CENNIK — REFINEMENTS round 4
   1. Brighter glass cards (~2× the white tint — pops on dark bg)
   2. Offer card top accent line follows the rounded top corners
      (switched from ::before flat line to border-top + border-box gradient)
   3. "od", "PLN" and the offer-card list — pure white
   4. Selected upsell — refined, less aggressive gradient
   ========================================================================= */

/* ---- 1. OFFER CARD · brighter glass + rounded top gradient accent ---- */

/* Kill the old flat-line ::before — top accent is now drawn by the border itself */
.rm-pricing-hero-v3 .rm-offer-card::before {
    display: none !important;
}
.rm-pricing-hero-v3 .rm-offer-card::after {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(255, 255, 255, 0.015) 60%,
        rgba(255, 255, 255, 0.07) 100%) !important;
}

/* ---- 2. BRIGHTER CARDS ---- */

/* Keypoints bar */

.rm-pricing-hero-keypoints::before {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.035) 40%,
        rgba(255, 255, 255, 0.015) 60%,
        rgba(255, 255, 255, 0.06) 100%) !important;
}
.rm-pricing-hero-kp {
    border-left-color: rgba(255, 255, 255, 0.12) !important;
}

/* Upsell cards */

/* Configurator summary */
.rm-cfg-summary-v2 {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
}
.rm-cfg-summary-v2::before {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.035) 40%,
        rgba(255, 255, 255, 0.015) 60%,
        rgba(255, 255, 255, 0.06) 100%) !important;
}

/* Configurator toggle-list container */
.rm-cfg-v2 .rm-cfg-upsells-list {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.22),
        0 18px 44px rgba(0, 0, 0, 0.4) !important;
}
.rm-cfg-v2 .rm-cfg-upsells-list::before {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.09) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.05) 100%) !important;
}
.rm-cfg-v2 .rm-cfg-upsell-toggle {
    border-bottom-color: rgba(255, 255, 255, 0.09) !important;
}

/* Included cards */
.rm-included-section .rm-included-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.025) 100%) !important;
}

.rm-included-section .rm-included-card:hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.035) 100%) !important;
}

/* Guarantee card */
.rm-guarantee-section .rm-guarantee-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
}
.rm-guarantee-section .rm-guarantee-card::before {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.035) 40%,
        rgba(255, 255, 255, 0.015) 60%,
        rgba(255, 255, 255, 0.06) 100%) !important;
}

/* Finale spec strip */
.rm-finale-section .rm-finale-spec-strip {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
}

/* Icon boxes brighter — upsell, included, flow step */
.rm-upsells-v2 .rm-upsell-icon,
.rm-included-section .rm-included-icon,
.rm-flow-step-icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        0 6px 16px rgba(0, 0, 0, 0.4) !important;
}
.rm-upsells-v2 .rm-upsell-icon::before,
.rm-included-section .rm-included-icon::before,
.rm-flow-step-icon::before {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 255, 255, 0.07) 100%) !important;
}

/* Guarantee icon brighter (keeps the gradient ring) */
.rm-guarantee-section .rm-guarantee-icon {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%) padding-box,
        var(--rm-grad) border-box !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 32px rgba(99, 102, 241, 0.2) !important;
}

/* CFG block num brighter glass + gradient ring */

/* ---- 3. WHITE TEXT · "od", "PLN", offer-card list ---- */
.rm-pricing-hero-v3 .rm-offer-card-from {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}
.rm-pricing-hero-v3 .rm-offer-card-currency {
    color: #ffffff !important;
}
.rm-pricing-hero-v3 .rm-offer-card-list li {
    color: #ffffff !important;
    font-weight: 500 !important;
}

/* ---- 4. SELECTED UPSELL · refined, less aggressive ---- */

/* Selected icon stays glass (no gradient ring) — refined, less busy */

/* =========================================================================
   v13 · CENNIK — REFINEMENTS round 5
   1. Strip blue/purple halo from card box-shadows (pure grayscale glass)
   2. Active upsell: gradient TOP accent only (via background-image so the
      card box doesn't grow), brighter body, NO movement (no border
      addition, no translateY) — zero shift between default and active
   3. Hover / active: zero transform so the user never sees the card move
   ========================================================================= */

/* ---- 1. KILL purple/blue halo from all card box-shadows ---- */
.rm-pricing-hero-v3 .rm-offer-card {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.32),
        0 30px 80px rgba(0, 0, 0, 0.7) !important;
}

.rm-upsells-v2 .rm-upsell-card {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.24),
        0 18px 44px rgba(0, 0, 0, 0.5) !important;
}

.rm-included-section .rm-included-card {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.24),
        0 18px 44px rgba(0, 0, 0, 0.48) !important;
}
.rm-included-section .rm-included-card:hover {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        0 22px 52px rgba(0, 0, 0, 0.55) !important;
    transform: none !important;
}
.rm-cfg-summary-v2 {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.28),
        0 24px 60px rgba(0, 0, 0, 0.6) !important;
}
.rm-guarantee-section .rm-guarantee-card {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.28),
        0 28px 68px rgba(0, 0, 0, 0.65) !important;
}
.rm-finale-section .rm-finale-spec-strip {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.28),
        0 14px 36px rgba(0, 0, 0, 0.55) !important;
}

/* ---- 2. ACTIVE UPSELL · gradient TOP accent only via background-image ----
   Background-image stacked on top of the body gradient. 3px tall strip at
   the top, clipped to the rounded shape by overflow:hidden + border-radius.
   No border added → card box stays the same size as default. */
.rm-upsells-v2 .rm-upsell-card.is-on {
    background-image:
        linear-gradient(90deg, #22d3ee 0%, #3b82f6 35%, #6366f1 65%, #7c3aed 100%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    background-clip: border-box, border-box !important;
    background-origin: border-box, border-box !important;
}
.rm-upsells-v2 .rm-upsell-card.is-on::before {
    /* Shine overlay stays — slightly brighter to match the active glass */
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(255, 255, 255, 0.02) 60%,
        rgba(255, 255, 255, 0.07) 100%) !important;
}

/* Selected icon — bright glass, no gradient ring, no movement */

/* Check badge — small, subtle, soft shadow */
.rm-upsells-v2 .rm-upsell-card.is-on::after {
    background: linear-gradient(145deg, #67e8f9 0%, #818cf8 60%, #a78bfa 100%) !important;
    color: #0a0218 !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        0 4px 10px rgba(0, 0, 0, 0.35) !important;
    top: 0.85rem !important;
    right: 0.85rem !important;
}

/* =========================================================================
   v14 · CENNIK — REFINEMENTS round 6
   1. Offer card: definitively grayscale glass body via background-image
      stack (the padding-box/border-box trick was failing). Brand gradient
      lives ONLY on the top 2px strip.
   2. Upsell cards: add the "light slide" sweep from .rm-included-card,
      add smooth translateY hover lift (kept on .is-on so click never
      drops the card), all with smooth cubic-bezier transitions.
   ========================================================================= */

/* ---- 1. OFFER CARD · clean grayscale glass + 2px brand top ---- */
.rm-pricing-hero-v3 .rm-offer-card {
    background-image:
        linear-gradient(90deg, #22d3ee 0%, #3b82f6 35%, #6366f1 65%, #7c3aed 100%),
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.04)  40%,
            rgba(255, 255, 255, 0.015) 60%,
            rgba(255, 255, 255, 0.07)  100%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
    background-clip: border-box, border-box, border-box !important;
    background-origin: border-box, border-box, border-box !important;
}
/* Kill old offer-card pseudo decorations — bg-image carries everything now */
.rm-pricing-hero-v3 .rm-offer-card::before,
.rm-pricing-hero-v3 .rm-offer-card::after {
    display: none !important;
    content: none !important;
}

/* ---- 2. UPSELL CARDS · four-layer bg + smooth transitions ---- */
.rm-upsells-v2 .rm-upsell-card {
    overflow: hidden !important;
    isolation: isolate !important;
    position: relative !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

/* HOVER (non-active) · lift + smooth sweep · NO sudden state */

/* ACTIVE · top accent visible + brighter body + KEEP the lift (no jump on click) */
.rm-upsells-v2 .rm-upsell-card.is-on {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.32),
        0 22px 52px rgba(0, 0, 0, 0.55) !important;
}

/* ::before · LIGHT SLIDE SWEEP (same pattern as .rm-included-card::after) ----
   IMPORTANT: explicit `right: auto; bottom: auto;` are needed to clear v11's
   `inset: 0` declaration. Do NOT use `inset: auto` here — it would clobber
   the explicit top/left values that come before it in the cascade. */
.rm-upsells-v2 .rm-upsell-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: -75% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 40%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 60%,
        transparent 100%) !important;
    transform: skewX(-20deg) !important;
    transition: left 1.1s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    -webkit-mask: none !important;
    mask: none !important;
    display: block !important;
    background-clip: border-box !important;
}
.rm-upsells-v2 .rm-upsell-card:hover::before {
    left: 125% !important;
}

/* Selected icon — bright glass, no border, no transform */
.rm-upsells-v2 .rm-upsell-card.is-on .rm-upsell-icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border: none !important;
    transform: none !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.34),
        0 6px 16px rgba(0, 0, 0, 0.4) !important;
}
.rm-upsells-v2 .rm-upsell-card.is-on .rm-upsell-icon i {
    color: #67e8f9 !important;
}

/* Smooth transitions on the children too — no sudden text colour shifts */
.rm-upsells-v2 .rm-upsell-name,
.rm-upsells-v2 .rm-upsell-desc,
.rm-upsells-v2 .rm-upsell-icon {
    transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* =========================================================================
   v15 · CENNIK — SMOOTH ACTIVE TRANSITIONS
   Clicking an upsell card now smoothly FADES the top brand strip and the
   checkmark badge in/out — instead of popping. Reverses identically on
   deselection. No layout shift (size stays constant).

   Technique:
   1. The top accent and the "brighter overlay" colors use rgba() whose
      alpha is driven by registered custom properties (--rm-top-a /
      --rm-bright-a). @property makes these <number>s transitionable.
   2. The checkmark ::after now ALWAYS renders. It just sits at opacity 0
      + scale(0.6) in the default state, and animates to opacity 1 +
      scale(1) when the card has .is-on. Fully reversible.
   ========================================================================= */

@property --rm-top-a {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}
@property --rm-bright-a {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

.rm-upsells-v2 .rm-upsell-card {
    background-image:
        linear-gradient(90deg,
            rgba(34, 211, 238,  var(--rm-top-a)) 0%,
            rgba(59, 130, 246,  var(--rm-top-a)) 35%,
            rgba(99, 102, 241,  var(--rm-top-a)) 65%,
            rgba(124, 58, 237,  var(--rm-top-a)) 100%),                   /* top accent · alpha animated */
        linear-gradient(145deg,
            rgba(255, 255, 255, calc(0.06 * var(--rm-bright-a))) 0%,
            rgba(255, 255, 255, calc(0.02 * var(--rm-bright-a))) 100%),    /* brighter overlay · alpha animated */
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.035) 40%,
            rgba(255, 255, 255, 0.015) 60%,
            rgba(255, 255, 255, 0.06) 100%),                              /* static shine */
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 255, 255, 0.025) 100%)                              /* body */
    !important;
    background-clip: border-box !important;
    background-origin: border-box !important;
}

/* Checkmark badge — always rendered, fades in/out smoothly */
.rm-upsells-v2 .rm-upsell-card::after {
    content: '✓' !important;
    position: absolute !important;
    top: 0.85rem !important;
    right: 0.85rem !important;
    bottom: auto !important;
    left: auto !important;
    width: 22px !important;
    height: 22px !important;
    background: linear-gradient(145deg, #67e8f9 0%, #818cf8 60%, #a78bfa 100%) !important;
    color: #0a0218 !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        0 4px 10px rgba(0, 0, 0, 0.35) !important;
    opacity: 0 !important;
    transform: scale(0.6) !important;
    transform-origin: center !important;
    transition:
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    z-index: 3 !important;
    animation: none !important;
}

.rm-upsells-v2 .rm-upsell-card.is-on::after {
    opacity: 1 !important;
    transform: scale(1) !important;
    animation: none !important;
    transition:
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* =========================================================================
   v16 · CENNIK — REFINEMENTS round 7 (targeted fixes)
   A. HERO  — drop the "CENNIK" eyebrow (HTML) + shorten the columns so the
              keypoints bar is visible in one screen.
   B. UPSELLS — kill the light-sweep while a card is active; render the top
              brand accent as a real rounded border so it wraps the corners
              (still fades via --rm-top-a, no body colour bleed: opaque base).
   C. CONFIGURATOR — remove the "01" bubble (HTML), white total price,
              base-plan description sits under the name.
   D. INCLUDED — uniform grayscale (opaque base, no saturate bleed) + no hover.
   E. GUARANTEE — restyled copy (HTML) — nothing extra needed in CSS.
   F. FINALE — cleaner spec strip + fix the primary button's stray edge.
   ========================================================================= */

/* ---- A. HERO · shorter columns, keypoints in view ---- */

.rm-pricing-hero-v3 .rm-pricing-hero-headline {
    margin: 0 0 1.25rem !important;
}
.rm-pricing-hero-v3 .rm-pricing-hero-lead {
    margin: 0 0 1.25rem !important;
}

.rm-pricing-hero-v3 .rm-offer-card-top {
    margin-bottom: 1.25rem !important;
    padding-bottom: 1rem !important;
}
.rm-pricing-hero-v3 .rm-offer-card-price { margin: 0 0 0.9rem !important; }
.rm-pricing-hero-v3 .rm-offer-card-tagline { margin: 0 0 1rem !important; }
.rm-pricing-hero-v3 .rm-offer-card-divider { margin: 0 0 1.1rem !important; }
.rm-pricing-hero-v3 .rm-offer-card-list { gap: 0.55rem !important; margin: 0 0 1.25rem !important; }
.rm-pricing-hero-v3 .rm-offer-card-fine { margin-top: 0.9rem !important; }
.rm-pricing-hero-keypoints { margin: clamp(3rem, 5vw, 4.5rem) auto 0 !important; }

/* ---- B. UPSELL CARDS · rounded gradient top border + no sweep on active ----
   The accent is painted into a transparent 3px top border (border-box layer),
   so it follows the rounded corners. An opaque base layer over the padding
   region stops the gradient bleeding into the card body. --rm-top-a (v15)
   still drives the fade; --rm-bright-a still brightens the active body. */
.rm-upsells-v2 .rm-upsell-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.025) 100%) padding-box,        /* glass sheen */
        linear-gradient(145deg,
            rgba(255, 255, 255, calc(0.05 * var(--rm-bright-a))) 0%,
            rgba(255, 255, 255, calc(0.02 * var(--rm-bright-a))) 100%) padding-box,                                  /* active brighten */
        linear-gradient(135deg, #21263a 0%, #0c0e13 36%, #0c0e13 64%, #1c2230 100%) padding-box,                                                 /* opaque base — blocks bleed */
        linear-gradient(90deg,
            rgba(34, 211, 238,  var(--rm-top-a)) 0%,
            rgba(59, 130, 246,  var(--rm-top-a)) 35%,
            rgba(99, 102, 241,  var(--rm-top-a)) 65%,
            rgba(124, 58, 237,  var(--rm-top-a)) 100%) border-box,                                                   /* top accent ring (alpha animated) */
        linear-gradient(0deg, #0e1015 0%, #0e1015 100%) border-box                                                   /* dark fallback under the ring */
    !important;
    background-size: auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #0e1015 !important;
    border: 0 solid transparent !important;
    border-top: 3px solid transparent !important;
    border-radius: 1rem !important;
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        --rm-top-a 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        --rm-bright-a 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.rm-upsells-v2 .rm-upsell-card.is-on {
    /* Re-declare the full background so it beats every older .is-on rule
       (v8–v13 set their own gradient body at higher specificity). Identical
       to the base — only --rm-top-a flips to 1, so the top accent fades in
       while the body stays grayscale (opaque base blocks any bleed). */
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.025) 100%) padding-box,
        linear-gradient(145deg,
            rgba(255, 255, 255, calc(0.05 * var(--rm-bright-a))) 0%,
            rgba(255, 255, 255, calc(0.02 * var(--rm-bright-a))) 100%) padding-box,
        linear-gradient(135deg, #21263a 0%, #0c0e13 36%, #0c0e13 64%, #1c2230 100%) padding-box,
        linear-gradient(90deg,
            rgba(34, 211, 238,  var(--rm-top-a)) 0%,
            rgba(59, 130, 246,  var(--rm-top-a)) 35%,
            rgba(99, 102, 241,  var(--rm-top-a)) 65%,
            rgba(124, 58, 237,  var(--rm-top-a)) 100%) border-box,
        linear-gradient(0deg, #0e1015 0%, #0e1015 100%) border-box
    !important;
    background-size: auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #0e1015 !important;
    border: 0 solid transparent !important;
    border-top: 3px solid transparent !important;
    border-radius: 1rem !important;
    --rm-top-a: 1 !important;
    --rm-bright-a: 1 !important;
    transform: translateY(-3px) !important;
}
/* No light-sweep while the card is selected (any hover state) */
.rm-upsells-v2 .rm-upsell-card.is-on::before,
.rm-upsells-v2 .rm-upsell-card.is-on:hover::before {
    opacity: 0 !important;
    left: -75% !important;
}

/* ---- C. CONFIGURATOR · white total + base-plan description ---- */
.rm-cfg-summary-v2 .rm-cfg-summary-total-num {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}
.rm-cfg-summary-v2 .rm-cfg-summary-plan {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
}
.rm-cfg-summary-v2 .rm-cfg-summary-plan-main {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 1rem !important;
}
.rm-cfg-summary-v2 .rm-cfg-summary-plan-desc {
    margin: 0 !important;
    color: var(--rm-v9-text-3) !important;
    font-size: 0.76rem !important;
    line-height: 1.5 !important;
    letter-spacing: 0.01em !important;
}

/* ---- D. INCLUDED CARDS · uniform grayscale, no hover ---- */
.rm-included-section .rm-included-card,
.rm-included-section .rm-included-card:hover {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        linear-gradient(135deg, #21263a 0%, #0c0e13 36%, #0c0e13 64%, #1c2230 100%) padding-box !important;
    background-color: #0e1015 !important;
    transform: none !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.22),
        0 18px 44px rgba(0, 0, 0, 0.48) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
}
.rm-included-section .rm-included-card::before {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 45%,
        rgba(255, 255, 255, 0.01) 65%,
        rgba(255, 255, 255, 0.05) 100%) !important;
}
.rm-included-section .rm-included-card:hover .rm-included-icon {
    transform: none !important;
}

/* ---- F. FINALE · cleaner spec strip ---- */
.rm-finale-section .rm-finale-spec-strip {
    display: inline-flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}
.rm-finale-section .rm-finale-spec-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
.rm-finale-section .rm-finale-spec-sep {
    width: 1px !important;
    height: auto !important;
    align-self: stretch !important;
    background: rgba(255, 255, 255, 0.13) !important;
    flex-shrink: 0 !important;
}
.rm-finale-section .rm-finale-spec-k {
    font-weight: 700 !important;
    color: var(--rm-v9-muted) !important;
    text-transform: uppercase !important;
}
.rm-finale-section .rm-finale-spec-v {
    font-weight: 800 !important;
}

/* ---- F. FINALE · primary button — remove stray gradient edge ----
   The transparent border + border-box gradient produced a faint blue ring
   at the corners. Drop the border, align background to the border box,
   and use a neutral drop shadow (no coloured halo). */
.rm-finale-section .rm-glass-btn-primary,
.rm-finale-section .rm-glass-btn-primary:hover {
    border: none !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
}
.rm-finale-section .rm-glass-btn-primary {
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.rm-finale-section .rm-glass-btn-primary:hover {
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* =========================================================================
   v17 · CENNIK — REFINEMENTS round 8
   1. Upsell hover must NOT darken — keep an opaque (slightly brighter) base.
   2. Hero: more breathing room up top, smaller offer card, rounded gradient
      top border (wraps the corners), brand logo replaces the "RM/M-149".
   3. Finale spec strip: bigger + wider.
   ========================================================================= */

/* ---- 1. UPSELL HOVER · brighten, never darken ---- */
.rm-upsells-v2 .rm-upsell-card:not(.is-on):hover {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.035) 100%) padding-box,
        linear-gradient(0deg, #13151b 0%, #13151b 100%) padding-box,
        linear-gradient(90deg,
            rgba(34, 211, 238,  var(--rm-top-a)) 0%,
            rgba(59, 130, 246,  var(--rm-top-a)) 35%,
            rgba(99, 102, 241,  var(--rm-top-a)) 65%,
            rgba(124, 58, 237,  var(--rm-top-a)) 100%) border-box,
        linear-gradient(0deg, #13151b 0%, #13151b 100%) border-box
    !important;
    background-color: #13151b !important;
    transform: translateY(-3px) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        0 22px 52px rgba(0, 0, 0, 0.55) !important;
}

/* ---- 2. HERO · spacing + smaller offer card + rounded gradient top border ---- */
.rm-pricing-hero-v3 {
    padding: clamp(7.5rem, 10vw, 9.5rem) 0 clamp(2.5rem, 4vw, 3.5rem) !important;
}
.rm-pricing-hero-v3 .rm-offer-card {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.03) 100%) padding-box,
        linear-gradient(135deg, #21263a 0%, #0c0e13 36%, #0c0e13 64%, #1c2230 100%) padding-box,
        linear-gradient(90deg, #22d3ee 0%, #3b82f6 35%, #6366f1 65%, #7c3aed 100%) border-box,
        linear-gradient(0deg, #0e1015 0%, #0e1015 100%) border-box
    !important;
    background-size: auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-color: #0e1015 !important;
    border: 0 solid transparent !important;
    border-top: 2.5px solid transparent !important;
    border-radius: 1.25rem !important;
    padding: 1.85rem !important;
}
/* shine overlay stays inside the padding box (doesn't cover the border) */
.rm-pricing-hero-v3 .rm-offer-card::after {
    inset: 0 !important;
    border-radius: 1.1rem !important;
}
/* smaller price */
.rm-pricing-hero-v3 .rm-offer-card-num {
    font-size: clamp(3.5rem, 6.6vw, 4.7rem) !important;
}
/* remove the "RM/M-149" serial — the brand logo goes there (HTML) */
.rm-pricing-hero-v3 .rm-offer-card-top::after {
    content: none !important;
    display: none !important;
}
.rm-pricing-hero-v3 .rm-offer-card-logo {
    height: 22px !important;
    width: auto !important;
    opacity: 0.92 !important;
    display: block !important;
}

/* ---- 3. FINALE SPEC STRIP · bigger + wider ---- */
.rm-finale-section .rm-finale-spec-item {
    padding: 1.05rem 2.7rem !important;
    gap: 0.4rem !important;
}
.rm-finale-section .rm-finale-spec-k {
    font-size: 0.66rem !important;
    letter-spacing: 0.24em !important;
}
.rm-finale-section .rm-finale-spec-v {
    font-size: 1.3rem !important;
    letter-spacing: 0 !important;
}
.rm-finale-section .rm-finale-spec-sep {
    margin: 0.85rem 0 !important;
}

/* =========================================================================
   HOME · v1 — strona główna dopasowana do języka wizualnego cennika
   PROBLEM section: drop the orange "fire" accent, use the brand gradient
   on the title <em> and a cyan superscript (numbers stay white, like the
   cennik's restrained number treatment).
   ========================================================================= */
.rm-problem-section .rm-problem-title em {
    background: var(--rm-grad) !important;
    background-size: auto !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: none !important;
}
.rm-problem-section .rm-problem-fig-num sup {
    color: #67e8f9 !important;
}

/* =========================================================================
   HOME · v3 — section consistency pass
   Unifies the remaining homepage sections to the cennik glass language:
   - buttons: primary = brand gradient, ghost = clean outline (= finale CTA)
   - smooth section flow (kill the hairline seam under the hero)
   - spec comparison cards + table → grayscale glass + brand/red top accent
   - showcase: consistent text colours + glass mockup w/ brand top border
   - finale: calmer background, clean eyebrow, white tile numbers
   ========================================================================= */

/* ---- FIX 2 · SMOOTH SECTION FLOW — remove the visible hairline seam ----
   The 1px gradient line at the top of the problem/showcase sections read as
   a hard "cut" right under the hero. Drop it; sections already blend through
   the page background. */
.rm-problem-section::before,
.rm-showcase-section::before {
    display: none !important;
}
/* Fade the hero's atmosphere into the page (no opaque panel edge) */
.rm-home-hero-bg {
    background:
        radial-gradient(ellipse 70% 55% at 50% -8%,  rgba(34, 211, 238, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 55% 50% at 14% 96%,  rgba(34, 211, 238, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 60% 55% at 86% 102%, rgba(124, 58, 237, 0.16) 0%, transparent 55%),
        radial-gradient(ellipse 85% 45% at 50% 48%,  rgba(99, 102, 241, 0.07) 0%, transparent 70%) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%) !important;
            mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%) !important;
}

/* ---- FIX 1 + 5 + 6 · BUTTONS — match the finale CTA language ----
   PRIMARY = full brand gradient, GHOST = clean transparent outline. */
.rm-home-hero .rm-glass-btn-ghost,
.rm-spec-section .rm-glass-btn-ghost,
.rm-showcase-section .rm-glass-btn-ghost {
    background: transparent !important;
    border: 1px solid var(--rm-v9-line-strong) !important;
    color: var(--rm-v9-text) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
.rm-home-hero .rm-glass-btn-ghost::before,
.rm-home-hero .rm-glass-btn-ghost::after,
.rm-spec-section .rm-glass-btn-ghost::before,
.rm-spec-section .rm-glass-btn-ghost::after,
.rm-showcase-section .rm-glass-btn-ghost::before,
.rm-showcase-section .rm-glass-btn-ghost::after { display: none !important; }
.rm-home-hero .rm-glass-btn-ghost:hover,
.rm-spec-section .rm-glass-btn-ghost:hover,
.rm-showcase-section .rm-glass-btn-ghost:hover {
    border-color: var(--rm-v9-cyan) !important;
    background: rgba(34, 211, 238, 0.05) !important;
    color: var(--rm-v9-text) !important;
    transform: none !important;
}
.rm-home-hero .rm-glass-btn-ghost:hover i,
.rm-spec-section .rm-glass-btn-ghost:hover i,
.rm-showcase-section .rm-glass-btn-ghost:hover i { transform: none !important; }

.rm-spec-section .rm-glass-btn-primary,
.rm-showcase-section .rm-glass-btn-primary {
    background: var(--rm-grad) !important;
    color: #ffffff !important;
    border: none !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.rm-spec-section .rm-glass-btn-primary::before,
.rm-spec-section .rm-glass-btn-primary::after,
.rm-showcase-section .rm-glass-btn-primary::before,
.rm-showcase-section .rm-glass-btn-primary::after { display: none !important; }
.rm-spec-section .rm-glass-btn-primary:hover,
.rm-showcase-section .rm-glass-btn-primary:hover {
    background: var(--rm-grad-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 18px 40px rgba(99, 102, 241, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* ---- FIX 3 · SPEC COMPARISON CARDS → grayscale glass + top accent strip ----
   Same border-top + glass language as the cennik cards. Keeps the red/cyan
   semantics on the accent strip + inner text only. */
.rm-spec-section .rm-spec-glance-card {
    border: 0 solid transparent !important;
    border-top: 2.5px solid transparent !important;
    border-radius: 1.25rem !important;
    background-color: #0e1015 !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.10),
        0 24px 60px rgba(0, 0, 0, 0.45) !important;
}
.rm-spec-section .rm-spec-glance-card::before { display: none !important; }
/* border-box gradient = top accent that curves into the rounded corners */
.rm-spec-section .rm-spec-glance-bad {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        linear-gradient(135deg, #21263a 0%, #0c0e13 36%, #0c0e13 64%, #1c2230 100%) padding-box,
        linear-gradient(90deg, #ef4444 0%, #f43f5e 100%) border-box,
        linear-gradient(0deg, #0e1015, #0e1015) border-box !important;
}
.rm-spec-section .rm-spec-glance-good {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        linear-gradient(135deg, #21263a 0%, #0c0e13 36%, #0c0e13 64%, #1c2230 100%) padding-box,
        linear-gradient(90deg, #22d3ee 0%, #3b82f6 35%, #6366f1 65%, #7c3aed 100%) border-box,
        linear-gradient(0deg, #0e1015, #0e1015) border-box !important;
}

/* ---- FIX 4 · DETAILS SUMMARY + TABLE → border-top + glass ---- */
.rm-spec-section .rm-spec-table {
    border: 0 solid transparent !important;
    border-top: 2.5px solid transparent !important;
    border-radius: 1.25rem !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%) padding-box,
        linear-gradient(135deg, #21263a 0%, #0c0e13 36%, #0c0e13 64%, #1c2230 100%) padding-box,
        linear-gradient(90deg, #22d3ee 0%, #3b82f6 35%, #6366f1 65%, #7c3aed 100%) border-box,
        linear-gradient(0deg, #0e1015, #0e1015) border-box !important;
    background-color: #0e1015 !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.08),
        0 24px 60px rgba(0, 0, 0, 0.45) !important;
}
.rm-spec-section .rm-spec-thead {
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}
.rm-spec-section .rm-spec-details-summary {
    color: var(--rm-v9-text-2) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    border: 1px solid var(--rm-v9-line-strong) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.16),
        0 10px 26px rgba(0, 0, 0, 0.35) !important;
}
.rm-spec-section .rm-spec-details-summary:hover {
    color: var(--rm-v9-text) !important;
    border-color: rgba(34, 211, 238, 0.45) !important;
    background: linear-gradient(145deg, rgba(34, 211, 238, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
}
.rm-spec-section .rm-spec-details-summary {
    -webkit-appearance: none !important;
    appearance: none !important;
}
.rm-spec-section .rm-spec-details.is-open .rm-spec-details-summary {
    color: #67e8f9 !important;
    border-color: rgba(34, 211, 238, 0.5) !important;
}
.rm-spec-section .rm-spec-details.is-open .rm-spec-details-chev { transform: rotate(180deg) !important; }
/* Smooth expand / collapse via grid-rows 0fr → 1fr */
.rm-spec-section .rm-spec-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-spec-section .rm-spec-details.is-open .rm-spec-collapse {
    grid-template-rows: 1fr;
}
.rm-spec-section .rm-spec-collapse-inner {
    overflow: hidden;
    min-height: 0;
}
/* shadow breathing room without leaving a sliver when collapsed */
.rm-spec-section .rm-spec-details.is-open .rm-spec-collapse-inner {
    padding-bottom: 1.5rem;
}

/* ---- FIX 6 · SHOWCASE — consistent text colours + glass mockup ---- */
.rm-showcase-section .rm-showcase-text h2 {
    font-size: clamp(2.2rem, 4.4vw, 3.4rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.04 !important;
}
.rm-showcase-section .rm-showcase-text .gradient-titanium-text {
    background: var(--rm-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: none !important;
}
.rm-showcase-section .rm-showcase-text p {
    color: var(--rm-v9-text-3) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}
.rm-showcase-section .rm-checklist li { color: var(--rm-v9-text-2) !important; }
.rm-showcase-section .rm-checklist li i { color: #67e8f9 !important; }
/* Mockup frame → glass body + brand-gradient top border (border-top + glass) */
.rm-showcase-section .rm-mockup-frame {
    border: 0 solid transparent !important;
    border-top: 2.5px solid transparent !important;
    border-radius: 1.25rem !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        linear-gradient(135deg, #21263a 0%, #0c0e13 36%, #0c0e13 64%, #1c2230 100%) padding-box,
        linear-gradient(90deg, #22d3ee 0%, #3b82f6 35%, #6366f1 65%, #7c3aed 100%) border-box,
        linear-gradient(0deg, #0e1015, #0e1015) border-box !important;
    background-color: #0e1015 !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.10),
        0 28px 70px rgba(0, 0, 0, 0.5) !important;
}
/* Inner tiles → keep their ORIGINAL colours, only swap the full border for a
   top-accent. First tile (hero bar) = rounded brand-gradient top; the rest
   keep their own subtle border colour as the top accent. */
.rm-showcase-section .rm-mock-block,
.rm-showcase-section .rm-mock-sm {
    border: 0 solid transparent !important;
    border-top: 2px solid var(--border-soft) !important;
    /* drop shadow only — no inset top highlight (it stacked under the
       border-top and made the top edge look like a thick double border) */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
}
.rm-showcase-section .rm-mock-hero-bar {
    position: relative !important;
    flex-direction: row !important;
    gap: 0 !important;
    border: 0 solid transparent !important;
    border-top: 2px solid transparent !important;
    background:
        linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(99, 102, 241, 0.11) 55%, rgba(124, 58, 237, 0.12) 100%) padding-box,
        linear-gradient(0deg, #1a2030, #1a2030) padding-box,
        linear-gradient(90deg, #22d3ee 0%, #3b82f6 35%, #6366f1 65%, #7c3aed 100%) border-box,
        linear-gradient(0deg, #1a2030, #1a2030) border-box !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
}
/* premium rank — 5 stars + #1 badge, anchored to the top-left corner */
.rm-showcase-section .rm-mock-rank {
    position: absolute !important;
    top: 0.6rem !important;
    left: 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}
.rm-showcase-section .rm-mock-stars {
    color: #fcd34d !important;
    font-size: 0.74rem !important;
    letter-spacing: 0.1em !important;
    line-height: 1 !important;
    text-shadow: 0 1px 4px rgba(252, 211, 77, 0.35) !important;
}
.rm-showcase-section .rm-mock-no1 {
    padding: 0.14rem 0.5rem !important;
    border-radius: 999px !important;
    font-size: 0.56rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    color: #ffffff !important;
    background: var(--rm-grad) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.rm-showcase-section .rm-mock-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    color: #ffffff !important;
}
.rm-showcase-section .rm-mock-title i {
    width: 15px !important;
    height: 15px !important;
    color: #67e8f9 !important;
}
/* Browser bar — clean minimalist "web" icon instead of traffic-light dots */
.rm-showcase-section .rm-mockup-bar-icon {
    width: 15px !important;
    height: 15px !important;
    color: #67e8f9 !important;
    flex-shrink: 0 !important;
    margin-right: 0.15rem !important;
}

/* ---- FIX 7 · FINALE — white tile numbers (bg + eyebrow handled in HTML) ---- */
.rm-home-finale .rm-finale-spec-v {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #f5f5f7 !important;
    color: #f5f5f7 !important;
}

/* ---- FIX 2 · TABLE — glass pills, logo, no row numbers, aligned columns ----
   Visible frosted body (lighter than the card) + inset highlight + a rounded
   border-top accent (semantic: red = bad, brand = good). Text keeps its
   red / cyan colour. */
.rm-spec-section .rm-spec-glance-tag,
.rm-spec-section .rm-spec-col-tag,
.rm-spec-section .rm-spec-price {
    border: 0 solid transparent !important;
    border-top: 2px solid transparent !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 100%) padding-box,
        linear-gradient(0deg, #1a1e26, #1a1e26) padding-box,
        linear-gradient(90deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.12)) border-box,
        linear-gradient(0deg, #1a1e26, #1a1e26) border-box !important;
}
/* semantic top accents */
.rm-spec-section .rm-spec-glance-tag,
.rm-spec-section .rm-spec-col-tag-bad,
.rm-spec-section .rm-spec-price-bad {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 100%) padding-box,
        linear-gradient(0deg, #1a1e26, #1a1e26) padding-box,
        linear-gradient(90deg, #ef4444 0%, #f43f5e 100%) border-box,
        linear-gradient(0deg, #1a1e26, #1a1e26) border-box !important;
}
.rm-spec-section .rm-spec-glance-tag-good,
.rm-spec-section .rm-spec-price-good {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.04) 100%) padding-box,
        linear-gradient(0deg, #1a1e26, #1a1e26) padding-box,
        linear-gradient(90deg, #22d3ee 0%, #6366f1 60%, #7c3aed 100%) border-box,
        linear-gradient(0deg, #1a1e26, #1a1e26) border-box !important;
}
/* "Raste Media" column → real header logo lockup (header proportions) */
.rm-spec-section .rm-spec-col-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.rm-spec-section .rm-spec-col-logo .hdr-logo-img {
    height: 26px;
    width: auto;
    object-fit: contain;
}
.rm-spec-section .rm-spec-col-logo .hdr-line-1 { font-size: 1.02rem !important; }
.rm-spec-section .rm-spec-col-logo .hdr-line-2 { font-size: 0.94rem !important; }
.rm-spec-section .rm-spec-th-good { padding-left: 1.5rem !important; }
/* Remove the "01 / 02 …" row counters (keep the ∑ total marker) */
.rm-spec-section .rm-spec-row-num { display: none !important; }
.rm-spec-section .rm-spec-row-num-total { display: inline-flex !important; }

/* =========================================================================
   FIX · BORDER-TOP bottom-corner bleed
   The border-box gradient trick paints the accent across the WHOLE border
   box; at the bottom rounded corners its anti-aliased edge bleeds ~1px past
   the opaque body, leaving a faint border in the bottom corners. Fix: anchor
   the accent layer to the TOP HALF only (no-repeat), so it physically never
   reaches the bottom corners. Top corners still curve (50% height ≫ radius).
   ---------------------------------------------------------------------------
   A) 4-layer elements — accent is background layer #3 */
.rm-pricing-hero-v3 .rm-offer-card,
.rm-spec-section .rm-spec-glance-bad,
.rm-spec-section .rm-spec-glance-good,
.rm-spec-section .rm-spec-table,
.rm-showcase-section .rm-mockup-frame,
.rm-showcase-section .rm-mock-hero-bar,
.rm-spec-section .rm-spec-glance-tag,
.rm-spec-section .rm-spec-col-tag,
.rm-spec-section .rm-spec-price {
    background-size: auto, auto, 100% 50%, auto !important;
    background-position: center, center, top, center !important;
    background-repeat: no-repeat !important;
}
/* B) 5-layer upsell cards — accent is background layer #4 */
.rm-upsells-v2 .rm-upsell-card,
.rm-upsells-v2 .rm-upsell-card.is-on {
    background-size: auto, auto, auto, 100% 50%, auto !important;
    background-position: center, center, center, top, center !important;
    background-repeat: no-repeat !important;
}

/* =========================================================================
   HOME · v2 — distinct HOMEPAGE hero (centered statement)
   Same design language as the cennik (dark, glass, brand gradient, mono
   eyebrow) but a deliberately different composition: centered headline +
   dual CTAs + a big-number stats band. NOT the cennik's 2-col price card.
   ========================================================================= */
.rm-home-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(9rem, 14vw, 13rem) 0 clamp(4rem, 7vw, 6rem);
    text-align: center;
}
.rm-home-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at 50% -8%,  rgba(34, 211, 238, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse 55% 50% at 12% 108%, rgba(34, 211, 238, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse 60% 55% at 88% 112%, rgba(124, 58, 237, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 85% 45% at 50% 48%,  rgba(99, 102, 241, 0.09) 0%, transparent 70%),
        #050608;
}
.rm-home-hero > .container { position: relative; z-index: 1; }
.rm-home-hero-inner {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rm-home-hero-eyebrow {
    justify-content: center;
    display: inline-flex;
    align-items: center;
    margin: 0 0 2rem !important;
}
.rm-home-hero-headline {
    font-size: clamp(3rem, 8vw, 6.4rem);
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: -0.05em;
    color: #f5f5f7;
    margin: 0 0 1.75rem;
}
.rm-home-hero-headline em {
    font-style: italic;
    font-weight: 900;
    background: var(--rm-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
    padding-right: 0.08em;
    margin-right: -0.04em;
}
.rm-home-hero-lead {
    max-width: 640px;
    margin: 0 0 2.5rem;
    color: var(--rm-v9-text-3);
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.7;
}
.rm-home-hero-lead strong { color: #f5f5f7; font-weight: 700; }
.rm-home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 0 0 clamp(3rem, 6vw, 4.5rem);
}
/* Primary CTA = full brand gradient (consistent with the finale button) */
.rm-home-hero .rm-glass-btn-primary {
    background: var(--rm-grad) !important;
    color: #ffffff !important;
    border: none !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.rm-home-hero .rm-glass-btn-primary::before,
.rm-home-hero .rm-glass-btn-primary::after { display: none !important; }
.rm-home-hero .rm-glass-btn-primary:hover {
    background: var(--rm-grad-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 18px 40px rgba(99, 102, 241, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}
/* Big-number stats band — distinct from the cennik keypoints */

.rm-home-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
.rm-home-stat-num {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2rem, 3.6vw, 2.9rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #f5f5f7;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
}
.rm-home-stat-unit {
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: #67e8f9;
    letter-spacing: 0.04em;
}
.rm-home-stat-label {
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--rm-v9-muted);
}
.rm-home-stat-sep {
    width: 1px;
    align-self: stretch;
    margin: 1.15rem 0;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .rm-home-hero-stats { flex-direction: column; width: 100%; max-width: 340px; }
    .rm-home-stat-sep { width: auto; height: 1px; margin: 0 1.4rem; }
    .rm-home-hero-actions { width: 100%; }
    .rm-home-hero-actions .rm-glass-btn { width: 100%; }
}

/* =========================================================================
   JAK DZIAŁAMY · v1 — align with the site's visual language
   Hero reuses .rm-home-hero (centered statement). These rules just bring the
   process + FAQ + finale into the same brand-gradient / clean-eyebrow style.
   ========================================================================= */
/* Section titles: static brand-gradient em (not the animated rainbow) */
.rm-process-section .gradient-titanium-text,
.rm-faq-section .gradient-titanium-text {
    background: var(--rm-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: none !important;
}
/* Finale tile numbers → white (consistent with the homepage finale) */
.rm-jd-finale .rm-finale-spec-v {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #f5f5f7 !important;
    color: #f5f5f7 !important;
}

/* ---- HEADING CONSISTENCY ----
   The process + FAQ section titles were undersized (clamp max 3.5rem / 2.8rem,
   weight 800). Match them to the cennik centered section-title scale exactly,
   so every section header reads the same across subpages. */
.rm-process-section .rm-process-title,
.rm-faq-section .rm-process-title {
    font-size: clamp(2.6rem, 5.5vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 1.0 !important;
    letter-spacing: -0.04em !important;
    color: #f5f5f7 !important;
    margin: 0 0 1.25rem !important;
}
.rm-process-section .rm-process-desc,
.rm-faq-section .rm-process-desc {
    color: var(--rm-v9-text-3) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    max-width: 560px !important;
    margin: 0 auto !important;
}
/* Timeline connector + small labels → brand (drop the old amber) */
.rm-process-timeline::before {
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.5) 0%, rgba(124, 58, 237, 0.3) 55%, transparent 100%) !important;
}
.rm-process-section .rm-step-label { color: #67e8f9 !important; }
.rm-process-section .rm-step-desc { color: var(--rm-v9-text-3) !important; }
/* H3 card titles → weight 800 (consistent with the rest of the site) */
.rm-process-section .rm-step-title,
.rm-faq-section .rm-faq-question { font-weight: 800 !important; }

/* ---- PROCESS STEPS → glass + border-top cards ----
   Each step body becomes a frosted glass card with a rounded brand top accent
   (same border-box technique as the offer / included cards). */
.rm-process-section .rm-step-body {
    border: 0 solid transparent !important;
    border-top: 2.5px solid transparent !important;
    border-radius: 1.25rem !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        linear-gradient(135deg, #21263a 0%, #0c0e13 36%, #0c0e13 64%, #1c2230 100%) padding-box,
        linear-gradient(90deg, #22d3ee 0%, #3b82f6 35%, #6366f1 65%, #7c3aed 100%) border-box,
        linear-gradient(0deg, #0e1015, #0e1015) border-box !important;
    background-color: #0e1015 !important;
    background-size: auto, auto, 100% 50%, auto !important;
    background-position: center, center, top, center !important;
    background-repeat: no-repeat !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.10),
        0 18px 44px rgba(0, 0, 0, 0.42) !important;
    padding: 1.5rem 1.75rem 1.65rem !important;
    backdrop-filter: blur(16px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}

/* =========================================================================
   JAK DZIAŁAMY · FAQ — clean 3D flip (question → short answer)
   - equal fixed height for every card
   - drop shadow lives on the (non-rotating) PARENT so there's no square
     halo + no shadow rotating in 3D
   - faces: glass + rounded brand border-top + diagonal "light-corners"
     gradient (light TL · darker center · light BR)
   ========================================================================= */
.rm-faq-grid {
    perspective: 1800px !important;
    -webkit-perspective: 1800px !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
}
.rm-faq-item {
    min-height: 250px !important;
    height: 100% !important;
    cursor: pointer !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 1.25rem !important;
    background: transparent !important;
    /* NO shadow on the parent — it sits behind the rotating faces and during
       the flip the foreshortened card exposed the parent's full-size shadow
       rectangle (the "odcień"). The shadow now lives on the faces instead. */
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    transform: none !important;
}
.rm-faq-item:hover { transform: none !important; }
.rm-faq-item:focus-visible { outline: none; }
.rm-faq-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 250px !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
}
/* Flip ONLY on click (JS toggles .is-flipped). No hover flip. */
.rm-faq-item.is-flipped .rm-faq-inner { transform: rotateY(180deg) !important; }
.rm-faq-face {
    position: absolute !important;
    inset: 0 !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    border: 0 solid transparent !important;
    border-top: 2.5px solid transparent !important;
    border-radius: 1.25rem !important;
    padding: 1.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        linear-gradient(135deg, #21263a 0%, #0c0e13 36%, #0c0e13 64%, #1c2230 100%) padding-box,
        linear-gradient(90deg, #22d3ee 0%, #3b82f6 35%, #6366f1 65%, #7c3aed 100%) border-box,
        linear-gradient(0deg, #0e1015, #0e1015) border-box !important;
    background-color: #0e1015 !important;
    background-size: auto, auto, 100% 50%, auto !important;
    background-position: center, center, top, center !important;
    background-repeat: no-repeat !important;
    /* drop shadow on the face → rotates with the card (no static rectangle) */
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.12),
        0 16px 38px rgba(0, 0, 0, 0.42) !important;
    /* NO backdrop-filter: the body is opaque so it does nothing, and combined
       with the 3D rotateY it rendered a tinted/hazy rectangle during the flip
       (and can break backface-visibility). */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.rm-faq-back {
    transform: rotateY(180deg) !important;
    justify-content: center !important;
}
/* keep the content above the hover-brighten overlay */
.rm-faq-face > * { position: relative !important; z-index: 1 !important; }
/* hover = smooth, subtle brighten (the flip itself is click-only now) */
.rm-faq-face::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 1.1rem !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 100%) !important;
    opacity: 0 !important;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.rm-faq-item:hover .rm-faq-face::after { opacity: 1 !important; }
/* icon-box → glass (matches the cennik included icons) */
.rm-faq-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 12px !important;
    border: none !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.22),
        0 6px 16px rgba(0, 0, 0, 0.4) !important;
    color: #67e8f9 !important;
    margin-bottom: 1.1rem !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.rm-faq-item:hover .rm-faq-icon { transform: scale(1.06) !important; }
.rm-faq-question {
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    color: #f5f5f7 !important;
    line-height: 1.35 !important;
    margin: 0 0 auto !important;
}
.rm-faq-answer {
    font-size: 0.95rem !important;
    color: var(--rm-v9-text-2) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    overflow: visible !important;
}
/* front hint pinned to the bottom */
.rm-faq-front .rm-faq-hint {
    margin-top: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-family: 'JetBrains Mono', 'Inter', monospace !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: #67e8f9 !important;
}
.rm-faq-front .rm-faq-hint i { width: 12px !important; height: 12px !important; }

/* ---- NEUTRALISE the OLD v5 flip-card hover behaviours (defined earlier in
   the file) that my rewrite didn't override. These were still active:
   1. hover-flip  →  the card flipped on hover (must be CLICK only)
   2. .rm-faq-front::before  →  a cyan sheen that swept on hover (the "lekki
      background color" that appeared). Killed. Hover now = ONLY the subtle
      brighten from .rm-faq-face::after. */
@media (hover: hover) {
    .rm-faq-item:not(.is-flipped):hover .rm-faq-inner { transform: none !important; }
}
.rm-faq-front::before,
.rm-faq-back::before {
    content: none !important;
    display: none !important;
    background: none !important;
}
.rm-faq-item:hover .rm-faq-front,
.rm-faq-item:hover .rm-faq-back {
    border-color: transparent !important;
}

/* =========================================================================
   KONTAKT · v1 — hero (reuses .rm-home-hero) + contact methods band +
   glass contact form (our style). All in the site's visual language.
   ========================================================================= */

/* ---- contact methods — two separate glass cards (e-mail · telefon) ---- */
.rm-contact-methods {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 0 0 2.5rem;
}
.rm-contact-method {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    min-width: 240px;
    padding: 1.4rem 2.4rem;
    text-decoration: none;
    /* glass card + rounded brand border-top + diagonal "light-corners" gradient */
    border: 0 solid transparent;
    border-top: 1px solid transparent;
    border-radius: 1rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 100%) padding-box,
        var(--rm-split-card-grad) padding-box,
        linear-gradient(90deg, #22d3ee 0%, #3b82f6 45%, #6366f1 54%, #7c3aed 100%) border-box,
        linear-gradient(0deg, #13151c, #13151c) border-box;
    background-color: #13151c;
    background-size: auto, auto, 100% 50%, auto;
    background-position: center, center, top, center;
    background-repeat: no-repeat;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.10),
        0 18px 44px rgba(0, 0, 0, 0.45);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
a.rm-contact-method:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.14),
        0 24px 56px rgba(0, 0, 0, 0.55);
}

.rm-contact-method-k {
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--rm-v9-muted);
}
.rm-contact-method-v {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f5f5f7;
    letter-spacing: -0.01em;
    transition: color 0.3s;
}
a.rm-contact-method:hover .rm-contact-method-v { color: #67e8f9; }
@media (max-width: 640px) {
    .rm-contact-methods { flex-direction: column; width: 100%; max-width: 340px; }
    .rm-contact-method { width: 100%; }
}

/* ---- contact form section + header ---- */
.rm-contact-form-section {
    padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(6rem, 12vw, 9rem);
    position: relative;
    z-index: 1;
}
.rm-contact-form-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}
.rm-contact-form-head .rm-pricing-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 1.25rem !important;
}
.rm-contact-form-title {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.0;
    color: #f5f5f7;
    margin: 0 0 1rem;
}
.rm-contact-form-section .gradient-titanium-text {
    background: var(--rm-grad) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    animation: none !important;
}
.rm-contact-form-sub {
    color: var(--rm-v9-text-3);
    font-size: 1.02rem;
    line-height: 1.6;
    margin: 0;
}
.rm-contact-form-sub a { color: #67e8f9; text-decoration: none; }
.rm-contact-form-sub a:hover { text-decoration: underline; }

/* ---- the form = glass card (border-top + glass + diagonal gradient) ---- */
.rm-contact-form {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border: 0 solid transparent;
    border-top: 2.5px solid transparent;
    border-radius: 1.5rem;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) padding-box,
        linear-gradient(135deg, #21263a 0%, #0c0e13 46%, #0c0e13 55%, #1c2230 100%) padding-box,
        linear-gradient(90deg, #22d3ee 0%, #3b82f6 35%, #6366f1 65%, #7c3aed 100%) border-box,
        linear-gradient(0deg, #0e1015, #0e1015) border-box;
    background-color: #0e1015;
    background-size: auto, auto, 100% 50%, auto;
    background-position: center, center, top, center;
    background-repeat: no-repeat;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.10),
        0 28px 70px rgba(0, 0, 0, 0.5);
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.rm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 560px) { .rm-form-row { grid-template-columns: 1fr; } }
.rm-form-group { display: flex; flex-direction: column; }
.rm-form-label {
    font-family: 'JetBrains Mono', 'Inter', monospace;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--rm-v9-text-3);
    margin-bottom: 0.55rem;
}
.rm-form-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    color: #f5f5f7;
    font-family: inherit;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.rm-form-input::placeholder { color: #5b6577; }
.rm-form-input:focus {
    border-color: rgba(34, 211, 238, 0.55);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
    /* background-COLOR (not the shorthand) so the <select> chevron background-image
       isn't wiped out when the field is focused. */
    background-color: rgba(255, 255, 255, 0.06);
}
.rm-form-textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
/* ---- custom dropdown (replaces native <select> — fully styleable + correct
   open/closed arrow state; writes to a hidden input for form submit) ---- */
.rm-select { position: relative; }
.rm-select-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    color: #f5f5f7;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.rm-select-btn:hover { border-color: rgba(255, 255, 255, 0.2); }
.rm-select.is-open .rm-select-btn,
.rm-select-btn:focus-visible {
    border-color: rgba(34, 211, 238, 0.55);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
    background-color: rgba(255, 255, 255, 0.06);
}
.rm-select-chevron {
    width: 16px;
    height: 16px;
    color: #67e8f9;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.rm-select.is-open .rm-select-chevron { transform: rotate(180deg); }
.rm-select-list {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%),
        linear-gradient(135deg, #21263a 0%, #0c0e13 46%, #0c0e13 55%, #1c2230 100%);
    background-color: #0e1015;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.25s;
}
.rm-select.is-open .rm-select-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.rm-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.85rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--rm-v9-text-2);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.rm-select-option:hover { background: rgba(34, 211, 238, 0.08); color: #f5f5f7; }
.rm-select-option.is-selected { color: #67e8f9; }
.rm-select-option.is-selected::after { content: '✓'; font-size: 0.8rem; }

/* consent / message / submit / fine print */
.rm-form-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    cursor: pointer;
}
.rm-form-consent input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #22d3ee;
    flex-shrink: 0;
    cursor: pointer;
}
.rm-form-consent span { font-size: 0.82rem; color: var(--rm-v9-text-3); line-height: 1.5; }
.rm-form-consent a { color: #67e8f9; text-decoration: none; }
.rm-form-msg { display: none; padding: 0.9rem 1rem; border-radius: 10px; font-size: 0.9rem; }

.rm-form-submit { width: 100% !important; justify-content: center !important; }
.rm-form-fine { font-size: 0.76rem; color: var(--rm-v9-muted); text-align: center; margin: 0; }
/* honeypot — visually hidden, off-screen */
.rm-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* primary submit → brand gradient (consistent with the rest of the site) */
.rm-contact-form .rm-glass-btn-primary {
    background: var(--rm-grad) !important;
    color: #ffffff !important;
    border: none !important;
    background-origin: border-box !important;
    background-clip: border-box !important;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.rm-contact-form .rm-glass-btn-primary::before,
.rm-contact-form .rm-glass-btn-primary::after { display: none !important; }
.rm-contact-form .rm-glass-btn-primary:hover {
    background: var(--rm-grad-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        0 18px 40px rgba(99, 102, 241, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* =========================================================================
   HERO BANDS → split into SEPARATE cards (like the kontakt contact methods)
   Homepage stats band + cennik keypoints bar. Now use the diagonal
   "light-corners" card gradient (same gray family as the other cards),
   a touch lighter than the kontakt cards were. No brand border-top here.
   ========================================================================= */
:root {
    /* lighter diagonal card gradient — shared by all the split cards */
    --rm-split-card-grad: linear-gradient(135deg, #2a3149 0%, #13151c 46%, #13151c 55%, #252c40 100%);
}
/* ---- Homepage: stats band → 3 cards ---- */
.rm-home-hero-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 1rem !important;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
.rm-home-stat {
    min-width: 160px !important;
    border-radius: 14px !important;
    padding: 1.4rem 2rem !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 100%),
        var(--rm-split-card-grad) !important;
    background-color: #13151c !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.12),
        0 16px 38px rgba(0, 0, 0, 0.44) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.rm-home-stat-sep { display: none !important; }

/* ---- Cennik: keypoints bar → 3 cards ---- */
.rm-pricing-hero-keypoints {
    gap: 1rem !important;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    isolation: auto !important;
}
.rm-pricing-hero-keypoints::before { display: none !important; }
.rm-pricing-hero-kp {
    border: none !important;
    border-radius: 14px !important;
    padding: 1.1rem 1.5rem !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 100%),
        var(--rm-split-card-grad) !important;
    background-color: #13151c !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.12),
        0 16px 38px rgba(0, 0, 0, 0.44) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* equalise: neutralise the old "first item has no left padding" separator rule */
.rm-pricing-hero-kp:first-child { padding-left: 1.5rem !important; }