/* Podstrony SEO — czysty tekst + sekcje h2, stopka jak główna */
:root {
    --bg-top: #0b0b0b;
    --bg-bottom: #050505;
    --text: #e8e8e8;
    --text-soft: #a1a1a1;
    --text-muted: #8b8b9e;
    --accent-light: rgb(118, 140, 245);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --vap-nav-ui-size: 0.85rem;
    --vap-nav-underline-width: 1.2px;
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --font-body: 'IBM Plex Sans', 'Inter', system-ui, sans-serif;
    --font-title: 'Montserrat', 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
    --font-hero-lead: 'IBM Plex Sans', 'Inter', 'Source Sans 3', system-ui, sans-serif;
    --font-section-title: 'Montserrat', 'Inter', 'IBM Plex Sans', system-ui, sans-serif;
    --max: 720px;
}

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

html { scroll-behavior: smooth; }

body.vap-sub-page {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-soft);
    background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom));
    background-color: var(--bg-bottom);
    overflow-x: hidden;
}

html:has(body.vap-sub-page.has-top-bar) {
    scroll-padding-top: 52px;
}

.vap-sub-page-ambient {
    pointer-events: none;
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.vap-sub-page-ambient .vap-sub-bubble {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    border: 1.5px solid rgba(102, 126, 234, 0.2);
    background: radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.1), transparent 70%);
    opacity: 0.45;
}

.vap-sub-bubble-1 { left: 5%; width: 10px; height: 10px; animation: vap-sub-bubble-rise 32s linear infinite; }
.vap-sub-bubble-2 { left: 8%; width: 8px; height: 8px; animation: vap-sub-bubble-rise 38s linear infinite 12s; }
.vap-sub-bubble-3 { right: 6%; width: 11px; height: 11px; animation: vap-sub-bubble-rise 29s linear infinite 6s; }

@keyframes vap-sub-bubble-rise {
    0% { transform: translateY(0); opacity: 0; }
    6% { opacity: 0.45; }
    94% { opacity: 0.2; }
    100% { transform: translateY(-105vh); opacity: 0; }
}

a { color: rgb(158, 178, 255); text-decoration: none; }
a:hover { text-decoration: underline; }

.vap-brand-base {
    display: inline-block;
    font-weight: 700;
    font-family: var(--font-section-title, 'Montserrat', 'Inter', 'IBM Plex Sans', system-ui, sans-serif);
    letter-spacing: 0.01em;
    color: #d4d4dc;
    -webkit-text-fill-color: #d4d4dc;
}
.vap-brand-pro {
    display: inline-block;
    margin-left: 0.12em;
    font-weight: 700;
    font-family: var(--font-section-title, 'Montserrat', 'Inter', 'IBM Plex Sans', system-ui, sans-serif);
    background: linear-gradient(120deg, #a8b8ff 0%, #667eea 55%, #8b9cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.vap-sub-main {
    position: relative;
    z-index: 1;
    max-width: var(--max);
    margin: 0 auto;
    padding: 56px 20px 64px;
}

.vap-sub-article h1 {
    display: inline-block;
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #c8c8d8;
    -webkit-text-fill-color: #c8c8d8;
    line-height: 1.3;
    margin: 0 0 14px;
    padding: 0 6px 10px;
    border: none;
    border-bottom: 1.84px solid rgba(102, 126, 234, 0.55);
    border-radius: 0;
    transition: border-bottom-color 0.28s var(--ease);
}

.vap-sub-article h1:hover {
    border-bottom-color: rgba(140, 158, 255, 0.95);
}

.vap-sub-lead { margin-bottom: 8px; }

.vap-sub-article h2 {
    display: inline-block;
    max-width: 100%;
    font-family: var(--font-title);
    font-size: calc(var(--vap-nav-ui-size) + 0.14rem);
    font-weight: 600;
    color: #c4c6d4;
    margin: 32px 0 12px;
    padding: 0 6px 8px;
    border-bottom: 1.84px solid rgba(102, 126, 234, 0.55);
    overflow-wrap: break-word;
    word-wrap: break-word;
    box-sizing: border-box;
}

.vap-sub-article p {
    font-family: var(--font-title);
    font-size: var(--vap-nav-ui-size);
    font-weight: 500;
    color: var(--text-soft);
    line-height: 1.6;
    margin: 0 0 16px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.vap-sub-article ul {
    margin: 0 0 16px;
    padding-left: 1.25rem;
    font-family: var(--font-title);
    font-size: var(--vap-nav-ui-size);
    font-weight: 500;
    color: var(--text-soft);
    line-height: 1.6;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.vap-sub-article li { margin-bottom: 8px; }

.vap-sub-back {
    margin-top: 28px;
    font-size: 0.88rem;
    font-family: var(--font-title);
}

.vap-sub-back a {
    color: rgb(158, 178, 255);
    font-weight: 500;
}

/* —— CTA zakupu — proste linie, bez animacji —— */
.vap-sub-cta-block {
    margin: 24px 0 36px;
    padding: 20px 0 4px;
    border-top: 1px solid rgba(102, 126, 234, 0.22);
    border-bottom: 1px solid rgba(102, 126, 234, 0.22);
}

.vap-sub-cta-block--bottom {
    margin-top: 28px;
    margin-bottom: 8px;
}

.vap-sub-cta-buy {
    display: inline-block;
    font-family: var(--font-title);
    font-size: calc((0.9rem - 2px) * 1.08);
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 30px;
    text-decoration: none;
    color: rgb(198, 210, 255);
    -webkit-text-fill-color: rgb(198, 210, 255);
    border-left: 2px solid rgba(102, 126, 234, 0.65);
    border-right: 2px solid rgba(102, 126, 234, 0.65);
    transition: color 0.25s var(--ease), -webkit-text-fill-color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease);
}

.vap-sub-cta-buy:hover {
    transform: translateY(-2px);
    color: rgb(168, 192, 255);
    -webkit-text-fill-color: rgb(168, 192, 255);
    border-left-color: rgba(102, 126, 234, 0.85);
    border-right-color: rgba(102, 126, 234, 0.85);
    text-decoration: none;
}

.vap-sub-cta-note {
    margin: 12px 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-family: var(--font-body);
}

.vap-sub-cta-note a {
    color: rgb(158, 178, 255);
    text-decoration: none;
    font-weight: 500;
}

.vap-sub-cta-note a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    :root { --vap-nav-ui-size: 0.80rem; }
}
@media (max-width: 640px) {
    :root { --vap-nav-ui-size: 0.75rem; }
}
@media (max-width: 500px) {
    :root { --vap-nav-ui-size: 0.71rem; }
}

@media (prefers-reduced-motion: reduce) {
    .vap-sub-page-ambient { display: none; }
}