/* ============================================
   ARLEK.PL - Subpage Styles
   BEM naming · CSS custom properties z main.css (:root tokens)
   ============================================ */
/* --- Header flicker fix: instant height collapse, animate only opacity --- */
.header.is-scrolled .topbar {
    transition: opacity 0.25s ease !important;
}
/* --- Screen-reader only utility --- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
/* ============================================
   1. PAGE HERO
   Dark header section for subpages
   ============================================ */
.page-hero {
    background: var(--color-dark);
    padding: calc(120px + var(--space-12)) 0 var(--space-16);
    position: relative;
    overflow: hidden;
}
/* Subtle radial glow - matches main hero */
.page-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 60%;
    height: 180%;
    background: radial-gradient(ellipse, rgba(255, 60, 0, 0.05) 0%, transparent 65%);
    pointer-events: none;
}
/* Grid-line texture */
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}
/* Compact variant for legal/simple pages */
.page-hero--compact {
    padding-bottom: var(--space-10);
}
.page-hero .container {
    position: relative;
    z-index: 2;
}
.page-hero .section-label {
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}
.page-hero__title {
    font-size: var(--text-4xl);
    color: #fff;
    margin-bottom: var(--space-4);
    max-width: 720px;
}
.page-hero__subtitle {
    font-size: var(--text-lg, 1.25rem);
    color: var(--color-dark-muted);
    line-height: var(--leading-normal, 1.7);
    max-width: 560px;
}
/* Decorative page-hero bottom border gradient */
.page-hero .container::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: var(--color-primary, #FF3C00);
    margin-top: var(--space-8, 2rem);
    border-radius: 2px;
}
/* ============================================
   2. BREADCRUMBS
   ============================================ */
.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-size: var(--text-xs);
    color: var(--color-dark-muted);
}
.breadcrumbs a {
    color: var(--color-dark-muted);
    transition: color var(--duration-fast) var(--ease-out);
}
.breadcrumbs a:hover {
    color: var(--color-primary);
}
.breadcrumbs__sep {
    opacity: 0.4;
    user-select: none;
}
.breadcrumbs__sep::before {
    content: '/';
}
.breadcrumbs__current {
    color: rgba(255, 255, 255, 0.6);
}
/* ============================================
   3. CONTACT PAGE
   2-column: cards (left) + form (right)
   ============================================ */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-12);
    align-items: start;
}
/* --- Contact Cards --- */
.contact-channels {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.contact-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    transition: all var(--duration-base) var(--ease-out);
}
.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 60, 0, 0.25);
}
.contact-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--radius-lg);
    font-size: var(--text-xl);
}
.contact-card__body {
    flex: 1;
    min-width: 0;
}
.contact-card__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}
.contact-card__value {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--color-text);
    display: block;
    word-break: break-word;
}
.contact-card__value a {
    color: var(--color-text);
    transition: color var(--duration-fast) var(--ease-out);
}
.contact-card__value a:hover {
    color: var(--color-primary);
}
.contact-card__note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
/* --- Contact Form --- */
.contact-form__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-2xl, 1.75rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin-bottom: var(--space-8, 2rem);
}
.contact-form-wrapper {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-xl, 16px);
    padding: var(--space-10, 2.5rem);
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}
.form-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
}
.required {
    color: var(--color-error);
    margin-left: 2px;
}
.optional {
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-left: var(--space-2);
}
.form-input,
.form-textarea {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base); /* 16px min - prevents iOS zoom */
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-muted);
}
.form-input:hover,
.form-textarea:hover {
    border-color: var(--color-text-muted);
}
.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 60, 0, 0.12);
}
.form-textarea {
    height: auto;
    min-height: 140px;
    padding: var(--space-3) var(--space-4);
    resize: vertical;
}
.form-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    cursor: pointer;
}
.form-checkbox-label input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-primary);
    cursor: pointer;
}
.form-checkbox-label a {
    color: var(--color-primary);
    text-decoration: underline;
}
.form-checkbox-label a:hover {
    color: var(--color-primary-hover);
}
/* Success / Error messages */
.form-message {
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    display: none;
}
.form-message.is-visible {
    display: block;
}
.form-message--success {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--color-success);
}
.form-message--error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--color-error);
}
/* Contact form submit - orange for CTA prominence */
.contact-form .btn--primary {
    background: var(--color-primary, #FF3C00);
    color: #fff;
    font-size: var(--text-base, 1.125rem);
    padding: var(--space-4, 1rem) var(--space-8, 2rem);
}
.contact-form .btn--primary:hover {
    background: var(--color-primary-hover, #D45A15);
    box-shadow: 0 8px 24px rgba(255, 60, 0, 0.3);
}
/* ============================================
   4. PORTFOLIO FILTERS
   Horizontal scrollable tags
   ============================================ */
.portfolio-filters {
    margin-bottom: var(--space-10);
}
.filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
}
.filter-group::-webkit-scrollbar {
    display: none;
}
.filter-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
    white-space: nowrap;
    margin-right: var(--space-2);
}
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration-fast) var(--ease-out);
}
.filter-tag:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}
.filter-tag.is-active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.filter-tag.is-active:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 var(--space-1);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-text-muted);
}
.filter-tag.is-active .filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
/* ============================================
   5. PORTFOLIO GRID
   3 col > 2 col > 1 col
   ============================================ */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}
.portfolio-grid--related {
    grid-template-columns: repeat(4, 1fr);
}
.portfolio-card {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: all var(--duration-base) var(--ease-out);
}
.portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}
.portfolio-card__image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg-alt);
}
.portfolio-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}
.portfolio-card:hover .portfolio-card__image img {
    transform: scale(1.04);
}
.portfolio-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 28, 39, 0.7);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}
.portfolio-card:hover .portfolio-card__overlay {
    opacity: 1;
}
.portfolio-card__overlay span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    border-radius: var(--radius-full);
    transform: translateY(8px);
    transition: transform var(--duration-base) var(--ease-out);
}
.portfolio-card:hover .portfolio-card__overlay span {
    transform: translateY(0);
}
.portfolio-card__info {
    padding: var(--space-5) var(--space-6);
}
.portfolio-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}
.portfolio-card__branza {
    font-size: var(--text-xs);
    color: var(--color-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.portfolio-card__miasto {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}
.portfolio-card__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--color-bg-alt) 0%, #e8e8e8 100%);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.portfolio-empty {
    text-align: center;
    padding: var(--space-16) 0;
    color: var(--color-text-muted);
}
.portfolio-empty p {
    font-size: var(--text-lg);
    margin-bottom: var(--space-6);
}
.text-accent {
    color: var(--color-primary);
}
.realizacja-mockup--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: var(--radius-xl);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
/* ============================================
   6. SINGLE REALIZACJA
   Content 65% + Sidebar 35%
   ============================================ */
.realizacja-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-12);
    align-items: start;
}
/* --- Content column --- */
.realizacja-content {
    min-width: 0;
}
.realizacja-mockup {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-10);
}
.realizacja-mockup img {
    width: 100%;
    height: auto;
    display: block;
}
.realizacja-branza {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    background: var(--color-primary-light);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-6);
}
.realizacja-opis {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-10);
}
.realizacja-opis p {
    margin-bottom: var(--space-4);
}
.realizacja-opis p:last-child {
    margin-bottom: 0;
}
/* Gallery */
.realizacja-galeria {
    margin-bottom: var(--space-10);
}
.realizacja-galeria__heading {
    font-size: var(--text-xl);
    margin-bottom: var(--space-6);
}
.galeria-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.galeria-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.galeria-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.galeria-item img {
    width: 100%;
    height: auto;
    display: block;
}
/* Testimonial inside realizacja */
.realizacja-testimonial {
    background: var(--color-bg-alt);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    padding: var(--space-8);
    margin-bottom: var(--space-10);
}
.realizacja-testimonial__text {
    font-style: italic;
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-4);
}
.realizacja-testimonial__author {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}
/* --- Sidebar --- */
.realizacja-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    position: sticky;
    top: calc(80px + var(--space-8));
}
.realizacja-meta {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}
.realizacja-meta__heading {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.meta-item {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-bg-alt);
}
.meta-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.meta-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}
.meta-value {
    font-size: var(--text-sm);
    color: var(--color-text);
    font-weight: 500;
}
.meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.meta-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}
.meta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    margin-top: var(--space-2);
    transition: color var(--duration-fast) var(--ease-out);
}
.meta-link:hover {
    color: var(--color-primary-hover);
}
/* CTA card in sidebar */
.realizacja-cta {
    background: var(--color-dark);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.realizacja-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255, 60, 0, 0.1) 0%, transparent 70%);
    pointer-events: none;
}
.realizacja-cta__heading {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: #fff;
    margin-bottom: var(--space-3);
    position: relative;
    z-index: 2;
}
.realizacja-cta__text {
    font-size: var(--text-sm);
    color: var(--color-dark-muted);
    margin-bottom: var(--space-6);
    line-height: var(--leading-normal);
    position: relative;
    z-index: 2;
}
.realizacja-cta .btn {
    position: relative;
    z-index: 2;
}
/* ============================================
   7. REVIEWS PAGE
   2-column grid of review cards
   ============================================ */
.testimonials-page-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8, 2rem);
}
.review-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-xl, 16px);
    padding: var(--space-8, 2rem) var(--space-8, 2rem) var(--space-6, 1.5rem);
    transition: all var(--duration-base, 300ms) var(--ease-out);
    display: flex;
    flex-direction: column;
}
.review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.1));
    border-color: rgba(255, 60, 0, 0.15);
}
.review-card__stars {
    color: #FBBF24;
    font-size: var(--text-lg, 1.25rem);
    letter-spacing: 3px;
    margin-bottom: var(--space-4, 1rem);
}
.review-card__text {
    font-style: italic;
    font-size: var(--text-base, 1.125rem);
    color: var(--color-text-body, #4B535D);
    line-height: var(--leading-normal, 1.7);
    margin-bottom: var(--space-6, 1.5rem);
    flex: 1;
}
.review-card__footer {
    padding-top: var(--space-4, 1rem);
    border-top: 1px solid var(--color-border, #E5E2E0);
}
.review-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
}
.review-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary, #FF3C00);
    color: #fff;
    font-weight: 700;
    font-size: var(--text-sm, 0.9375rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.review-card__name {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm, 0.9375rem);
    color: var(--color-dark, #121C27);
}
.review-card__date {
    display: block;
    font-size: var(--text-xs, 0.8125rem);
    color: var(--color-text-muted, #8A909A);
    margin-top: 2px;
}
/* --- Rating Summary Badge --- */
.rating-summary {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-12, 3rem);
}
.rating-summary__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-8, 2rem) var(--space-16, 4rem);
    background: var(--color-dark, #121C27);
    border-radius: var(--radius-xl, 16px);
    text-align: center;
}
.rating-summary__number {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-5xl, 3.5rem);
    color: #fff;
    line-height: 1;
}
.rating-summary__stars {
    color: #FBBF24;
    font-size: var(--text-2xl, 1.75rem);
    letter-spacing: 4px;
}
.rating-summary__label {
    font-size: var(--text-sm, 0.9375rem);
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--space-2, 0.5rem);
}
/* ============================================
   8. STANDARDS GRID
   3-column, left orange border accent
   ============================================ */
.standards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}
.standard-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E5E2E0);
    border-left: 4px solid var(--color-primary, #FF3C00);
    border-radius: 0 var(--radius-xl, 16px) var(--radius-xl, 16px) 0;
    padding: var(--space-8, 2rem);
    transition: all var(--duration-base, 300ms) var(--ease-out);
}
.standard-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.1));
    border-left-color: var(--color-primary-hover, #D45A15);
}
.standard-card__icon {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-4);
}
.standard-card h3,
.standard-card__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-xl, 1.4375rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin-bottom: var(--space-3, 0.75rem);
}
.standard-card p,
.standard-card__text {
    font-size: var(--text-sm, 0.9375rem);
    color: var(--color-text-body, #4B535D);
    line-height: var(--leading-normal, 1.7);
}
/* Standard card numbering */
.standards-grid {
    counter-reset: standard-counter;
}
.standard-card {
    counter-increment: standard-counter;
    position: relative;
}
.standard-card::before {
    content: counter(standard-counter, decimal-leading-zero);
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-2xl, 1.75rem);
    color: var(--color-primary, #FF3C00);
    opacity: 0.25;
    margin-bottom: var(--space-4, 1rem);
    display: block;
}
.standard-card h3 {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-weight: 400;
}
/* ============================================
   9. PAGINATION
   ============================================ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-12);
}
.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--duration-fast) var(--ease-out);
}
.page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.page-numbers.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.page-numbers.dots {
    border: none;
    background: transparent;
    pointer-events: none;
    color: var(--color-text-muted);
    min-width: auto;
    padding: 0 var(--space-1);
}
.page-numbers.prev,
.page-numbers.next {
    font-weight: 700;
}
/* ============================================
   10. MAP WRAPPER
   ============================================ */
.map-wrapper {
    width: 100%;
    height: 450px;
    border-radius: var(--radius-xl, 16px);
    overflow: hidden;
    border: 1px solid var(--color-border, #E5E2E0);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.1));
}
.map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(0.3);
    transition: filter var(--duration-base, 300ms) var(--ease-out);
}
.map-wrapper:hover iframe {
    filter: grayscale(0);
}
/* ============================================
   404 PAGE
   ============================================ */
.page-hero--404 {
    min-height: 70vh;
    display: flex;
    align-items: center;
}
.page-hero--404__inner {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.page-hero--404__number {
    display: block;
    font-family: var(--font-body, 'GT Walsheim Pro', sans-serif);
    font-size: clamp(6rem, 15vw, 10rem);
    font-weight: 700;
    color: rgba(255, 60, 0, 0.12);
    line-height: 1;
    margin-bottom: var(--space-4, 1rem);
}
.page-hero--404 .page-hero__title {
    text-align: center;
}
.page-hero--404 .page-hero__subtitle {
    text-align: center;
    margin: 0 auto var(--space-10, 2.5rem);
    max-width: 480px;
}
/* Remove the orange bar after container for 404 */
.page-hero--404 .container::after {
    display: none;
}
/* Primary button orange on 404 dark page */
.page-hero--404 .btn--primary {
    background: var(--color-primary, #FF3C00);
    color: #fff;
}
.page-hero--404 .btn--primary:hover {
    background: var(--color-primary-hover, #D45A15);
    box-shadow: 0 8px 30px rgba(255, 60, 0, 0.4);
}
/* ============================================
   RESPONSIVE - 1200px (Small desktop)
   ============================================ */
@media (max-width: 1200px) {
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* ============================================
   RESPONSIVE - 1024px (Tablet)
   ============================================ */
@media (max-width: 1024px) {

    /* Page hero */
    .page-hero {
        padding-top: calc(100px + var(--space-10));
        padding-bottom: var(--space-12);
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    /* Single realizacja */
    .realizacja-layout {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .realizacja-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }

    /* Reviews */
    .testimonials-page-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Standards */
    .standards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ============================================
   RESPONSIVE - 768px (Mobile)
   ============================================ */
@media (max-width: 768px) {

    /* Page hero */
    .page-hero {
        padding-top: calc(90px + var(--space-8));
        padding-bottom: var(--space-10);
    }

    .page-hero__title {
        font-size: var(--text-3xl);
    }

    /* Contact */
    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form-wrapper {
        padding: var(--space-6);
    }

    /* Portfolio */
    .portfolio-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Single realizacja */
    .realizacja-sidebar {
        grid-template-columns: 1fr;
    }

    .galeria-grid {
        grid-template-columns: 1fr;
    }

    /* Reviews */
    .testimonials-page-grid {
        grid-template-columns: 1fr;
    }

    /* Standards */
    .standards-grid {
        grid-template-columns: 1fr;
    }

    /* Pagination */
    .page-numbers {
        min-width: 40px;
        height: 40px;
    }

    /* Map */
    .map-wrapper {
        height: 300px;
        border-radius: var(--radius-lg);
    }
}
/* ============================================
   RESPONSIVE - 480px (Small mobile)
   ============================================ */
@media (max-width: 480px) {

    /* Page hero */
    .page-hero {
        padding-top: calc(70px + var(--space-6));
        padding-bottom: var(--space-8);
    }

    .page-hero__title {
        font-size: var(--text-2xl);
    }

    /* Contact */
    .contact-card {
        flex-direction: column;
        padding: var(--space-6);
    }

    .contact-form-wrapper {
        padding: var(--space-5);
    }

    /* Portfolio filters - full-width scroll */
    .filter-group {
        gap: var(--space-2);
    }

    .filter-tag {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }

    /* Portfolio card padding */
    .portfolio-card__info {
        padding: var(--space-4) var(--space-5);
    }

    /* Single realizacja */
    .realizacja-meta {
        padding: var(--space-6);
    }

    .realizacja-cta {
        padding: var(--space-6);
    }

    /* Review cards */
    .review-card {
        padding: var(--space-6);
    }

    .review-card__footer {
        flex-direction: column;
        gap: var(--space-1);
    }

    /* Standard cards */
    .standard-card {
        padding: var(--space-6);
    }

    /* Map */
    .map-wrapper {
        height: 240px;
    }
}
/* ============================================
   11. GENERIC SECTION WRAPPERS
   Used across all subpages
   ============================================ */
.section {
    padding: var(--section-padding, 120px) 0;
}
.section--light {
    background: var(--color-bg, #fff);
}
.section--alt {
    background: var(--color-bg-alt, #F1EEEE);
}
.section--dark {
    background: var(--color-dark, #121C27);
    color: #fff;
}
.section--cta {
    background: var(--color-dark, #121C27);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.section--cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(255, 60, 0, 0.08) 0%, transparent 65%);
    pointer-events: none;
}
/* Section title - used on all subpages */
.section-title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-4xl, 2.625rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    line-height: var(--leading-snug, 1.3);
    margin-bottom: var(--space-6, 1.5rem);
}
.section-title--light {
    color: #fff;
}
/* Section label - orange uppercase tag */
.section-label {
    display: inline-block;
    font-family: var(--font-body, 'GT Walsheim Pro', sans-serif);
    font-size: var(--text-xs, 0.8125rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-primary, #FF3C00);
    margin-bottom: var(--space-4, 1rem);
}
.section-label--light {
    color: rgba(255, 255, 255, 0.5);
}
/* Section label - spójnie wszędzie (bez dekoracyjnej kreseczki) */
.section--light .section-label,
.section--alt .section-label {
    color: var(--color-primary, #FF3C00);
    position: relative;
    padding-left: 0;
}
/* dawne ::before usunięte - niespójne między --alt (z kreską) i --dark (bez) */
.section-subtitle {
    font-size: var(--text-lg, 1.25rem);
    color: var(--color-text-body, #4B535D);
    line-height: var(--leading-normal, 1.7);
    max-width: 600px;
    margin-bottom: var(--space-10, 2.5rem);
}
.section-subtitle--light {
    color: rgba(255, 255, 255, 0.6);
}
.container--narrow {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
/* Section CTA - centered button block under content */
.section-cta {
    text-align: center;
    margin-top: var(--space-12, 3rem);
}
/* ============================================
   12. BUTTON VARIANTS
   ============================================ */
.btn--block {
    display: flex;
    width: 100%;
    justify-content: center;
}
.btn--lg {
    padding: 16px 32px;
    font-size: 1rem;
}
.btn--xl {
    padding: 20px 40px;
    font-size: 1.0625rem;
}
.btn--outline-light {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    transition: all 300ms ease;
    cursor: pointer;
    text-decoration: none;
}
.btn--outline-light:hover {
    background: #fff;
    color: var(--color-dark, #121C27);
    border-color: #fff;
}
.cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 40px;
}
/* ============================================
   13. OFFER / PRICING CARDS (page-oferta)
   ============================================ */
.offer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 960px;
    margin: 0 auto;
}
.offer-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-xl, 16px);
    padding: 48px 40px;
    position: relative;
    transition: all var(--duration-base, 300ms) var(--ease-out);
}
.offer-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl, 0 24px 48px rgba(0,0,0,0.12));
}
.offer-card--featured {
    border-color: var(--color-primary, #FF3C00);
    box-shadow: 0 0 0 1px var(--color-primary, #FF3C00), var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.1));
}
.offer-card--featured:hover {
    box-shadow: 0 0 0 1px var(--color-primary, #FF3C00), var(--shadow-xl, 0 24px 48px rgba(0,0,0,0.12));
}
.offer-badge {
    position: absolute;
    top: -1px;
    left: var(--space-8, 2rem);
    background: var(--color-primary, #FF3C00);
    color: #fff;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
    z-index: 2;
}
.offer-card__header {
    margin-bottom: 24px;
}
.offer-card__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.75rem;
    color: var(--color-dark, #121C27);
    margin-bottom: 8px;
}
.offer-card__desc {
    font-size: 0.9375rem;
    color: var(--color-text-muted, #7a8894);
}
.offer-card__price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 32px;
}
.price-amount {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-dark, #121C27);
    line-height: 1;
}
.price-currency {
    font-size: 1rem;
    color: var(--color-text-muted, #7a8894);
    font-weight: 500;
}
.offer-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.offer-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.9375rem;
    color: var(--color-text-secondary, #535d66);
    line-height: 1.5;
}
.offer-card__features li::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background: #FF3C00;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}
/* ============================================
   14. MAINTENANCE CARDS (page-obsluga)
   ============================================ */
.maintenance-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}
.maintenance-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgba(18,28,39,0.15));
    border-radius: 16px;
    padding: 40px 32px;
    position: relative;
    transition: all 300ms ease;
}
.maintenance-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.maintenance-card--featured {
    border-color: #FF3C00;
    box-shadow: 0 0 0 1px #FF3C00;
}
.maintenance-card--outline {
    background: transparent;
    border-style: dashed;
}
.maintenance-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #FF3C00;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 16px;
    border-radius: 50px;
    white-space: nowrap;
}
.maintenance-card__header {
    margin-bottom: 16px;
}
.maintenance-card__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.5rem;
    color: var(--color-dark, #121C27);
}
.maintenance-card__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 24px;
}
.maintenance-card__amount {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-dark, #121C27);
    line-height: 1;
}
.maintenance-card__currency {
    font-size: 0.875rem;
    color: var(--color-text-muted, #7a8894);
}
.maintenance-card__desc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary, #535d66);
    line-height: 1.6;
    margin-bottom: 24px;
}
.maintenance-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.maintenance-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
    color: var(--color-text-secondary, #535d66);
    line-height: 1.4;
}
.maintenance-card__features li::before {
    content: '✓';
    color: #1ede8f;
    font-weight: 700;
    flex-shrink: 0;
}
/* ============================================
   15. ONE-TIME SERVICES GRID (page-obsluga)
   ============================================ */
.onetime-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 0;
}
.onetime-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgba(18,28,39,0.15));
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    transition: all 300ms ease;
}
.onetime-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.onetime-card__icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 60, 0, 0.08);
    border-radius: 12px;
    color: #FF3C00;
}
.onetime-card__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.125rem;
    color: var(--color-dark, #121C27);
    margin-bottom: 8px;
}
.onetime-card__price {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #FF3C00;
    background: rgba(255, 60, 0, 0.08);
    padding: 4px 14px;
    border-radius: 50px;
}
.onetime-note {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted, #7a8894);
    margin-top: 32px;
    font-style: italic;
}
/* ============================================
   16. PROCESS STEPS (page-obsluga)
   ============================================ */
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 48px;
}
.process-step {
    text-align: center;
    position: relative;
}
/* Connector line between steps */
.process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px;
    right: -16px;
    width: 32px;
    height: 2px;
    background: rgba(255, 60, 0, 0.25);
}
.process-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-family: var(--font-body, 'GT Walsheim Pro', sans-serif);
    font-size: 1.25rem;
    font-weight: 700;
    color: #FF3C00;
    background: rgba(255, 60, 0, 0.08);
    border-radius: 50%;
    margin-bottom: 20px;
}
.process-step__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 12px;
}
.process-step__text {
    font-size: var(--text-sm, 0.9375rem);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}
/* ============================================
   16b. STEPS TIMELINE (Oferta Wizytowka / Dedykowany)
   ============================================ */
.steps-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--space-10, 2.5rem);
    counter-reset: step-counter;
}
.steps-timeline--compact {
    margin-top: var(--space-6, 1.5rem);
}
.step {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-6, 1.5rem);
    padding: var(--space-8, 2rem) 0;
    border-bottom: 1px solid var(--color-border, #E5E2E0);
    position: relative;
}
.step:last-child {
    border-bottom: none;
}
.step-number {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-3xl, 2.25rem);
    color: var(--color-primary, #FF3C00);
    opacity: 0.35;
    line-height: 1;
    padding-top: 4px;
}
.step-content {
    min-width: 0;
}
.step-title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-xl, 1.4375rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin-bottom: var(--space-2, 0.5rem);
}
.step-text {
    font-size: var(--text-sm, 0.9375rem);
    color: var(--color-text-body, #4B535D);
    line-height: var(--leading-normal, 1.7);
}
/* ============================================
   16c. PROSE CONTENT (Dedykowany intro text)
   ============================================ */
.prose {
    font-size: var(--text-base, 1.125rem);
    color: var(--color-text-body, #4B535D);
    line-height: var(--leading-relaxed, 1.8);
}
.prose p {
    margin-bottom: var(--space-4, 1rem);
}
.prose p:last-child {
    margin-bottom: 0;
}
.prose strong {
    color: var(--color-text, #0A1119);
    font-weight: 600;
}
.prose a {
    color: var(--color-primary, #FF3C00);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--duration-fast, 150ms) var(--ease-out);
}
.prose a:hover {
    color: var(--color-primary-hover, #D45A15);
}
/* ============================================
   16d. SERVICES GRID (Dedykowany page)
   ============================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8, 2rem);
    margin-top: var(--space-10, 2.5rem);
}
.service-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-xl, 16px);
    padding: var(--space-8, 2rem);
    text-align: left;
    transition: all var(--duration-base, 300ms) var(--ease-out);
    position: relative;
    overflow: hidden;
}
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-primary, #FF3C00);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base, 300ms) var(--ease-out);
}
.service-card:hover::before {
    transform: scaleX(1);
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl, 0 24px 48px rgba(0,0,0,0.12));
    border-color: rgba(255, 60, 0, 0.2);
}
.service-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-light, #FFF3EC);
    border-radius: var(--radius-lg, 12px);
    color: var(--color-primary, #FF3C00);
    margin-bottom: var(--space-5, 1.25rem);
}
.service-card__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-xl, 1.4375rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin-bottom: var(--space-3, 0.75rem);
}
.service-card__desc {
    font-size: var(--text-sm, 0.9375rem);
    color: var(--color-text-body, #4B535D);
    line-height: var(--leading-normal, 1.7);
}
/* ============================================
   16e. PACKAGE PRICE DISPLAY (Wizytowka detail)
   ============================================ */
.package-price {
    display: flex;
    align-items: baseline;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-3, 0.75rem);
}
.package-price__amount {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-5xl, 3.5rem);
    color: var(--color-primary, #FF3C00);
    line-height: 1;
}
.package-price__currency {
    font-size: var(--text-lg, 1.25rem);
    color: var(--color-text-body, #4B535D);
    font-weight: 500;
}
.package-price__note {
    font-size: var(--text-sm, 0.9375rem);
    color: var(--color-text-muted, #8A909A);
    margin-bottom: var(--space-4, 1rem);
}
.package-price__time {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--text-sm, 0.9375rem);
    font-weight: 600;
    color: var(--color-primary, #FF3C00);
    background: var(--color-primary-light, #FFF3EC);
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    border-radius: var(--radius-full, 9999px);
}
/* Package detail layout */
.package-detail {
    max-width: 860px;
    margin: 0 auto;
}
.package-detail__header {
    text-align: center;
    margin-bottom: var(--space-12, 3rem);
    padding-bottom: var(--space-10, 2.5rem);
    border-bottom: 1px solid var(--color-border, #E5E2E0);
}
.package-detail__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-2xl, 1.75rem);
    color: var(--color-dark, #121C27);
    margin-bottom: var(--space-6, 1.5rem);
}
.package-detail__footer {
    margin-top: var(--space-10, 2.5rem);
    padding-top: var(--space-10, 2.5rem);
    border-top: 1px solid var(--color-border, #E5E2E0);
}
.package-payment {
    margin-bottom: var(--space-8, 2rem);
}
.package-payment__info {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    font-size: var(--text-base, 1.125rem);
    color: var(--color-text, #0A1119);
    font-weight: 500;
    margin-bottom: var(--space-2, 0.5rem);
}
.package-payment__vat {
    font-size: var(--text-sm, 0.9375rem);
    color: var(--color-text-muted, #8A909A);
}
.package-detail__actions {
    display: flex;
    gap: var(--space-4, 1rem);
    flex-wrap: wrap;
}
/* Portfolio placeholder */
.portfolio-placeholder {
    text-align: center;
    padding: var(--space-16, 4rem) var(--space-8, 2rem);
    background: var(--color-bg-alt, #F1EEEE);
    border-radius: var(--radius-xl, 16px);
    color: var(--color-text-muted, #8A909A);
    font-size: var(--text-sm, 0.9375rem);
    grid-column: 1 / -1;
}
/* ============================================
   17. FAQ ACCORDION (pages)
   ============================================ */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border-bottom: 1px solid var(--color-border, #E5E2E0);
}
.faq-item:first-child {
    border-top: 1px solid var(--color-border, #E5E2E0);
}
.faq-question {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    font-family: var(--font-body, 'GT Walsheim Pro', sans-serif);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-dark, #121C27);
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
}
.faq-question::marker,
.faq-item summary::marker,
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    font-family: var(--font-body, 'GT Walsheim Pro', sans-serif);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-dark, #121C27);
    cursor: pointer;
    list-style: none;
    transition: color var(--duration-fast, 150ms) var(--ease-out);
}
/* Arrow indicator */
.faq-item summary::after {
    content: '';
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--duration-base, 300ms) var(--ease-out);
    margin-left: var(--space-4, 1rem);
    opacity: 0.4;
}
.faq-item[open] summary::after {
    transform: rotate(-135deg);
    opacity: 1;
    color: var(--color-primary, #FF3C00);
}
.faq-item summary:hover {
    color: var(--color-primary, #FF3C00);
}
.faq-answer {
    padding: 0 0 24px;
    font-size: var(--text-sm, 0.9375rem);
    color: var(--color-text-body, #4B535D);
    line-height: var(--leading-relaxed, 1.8);
    padding-right: var(--space-10, 2.5rem);
}
.faq-answer p {
    margin: 0;
}
/* ============================================
   18. CONTACT COMPANY DATA
   ============================================ */
.contact-company {
    background: var(--color-bg-alt, #F1EEEE);
    border-radius: 16px;
    padding: 32px;
}
.contact-company h3 {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.25rem;
    color: var(--color-dark, #121C27);
    margin-bottom: 16px;
}
.contact-company p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary, #535d66);
    line-height: 1.6;
    margin-bottom: 6px;
}
.contact-company p:last-child {
    margin-bottom: 0;
}
/* ============================================
   19. REVEAL ANIMATION CLASS
   ============================================ */
.reveal {
    opacity: 1;
}
/* ============================================
   RESPONSIVE - NEW COMPONENTS
   ============================================ */
@media (max-width: 1024px) {
    .offer-grid {
        grid-template-columns: 1fr;
        max-width: 540px;
    }

    .maintenance-cards {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }

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

    .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .package-detail {
        grid-template-columns: 1fr;
    }

    .package-detail__sidebar {
        position: static;
        order: -1;
    }
}
@media (max-width: 768px) {
    .section {
        padding: 80px 0;
    }

    .section--cta {
        padding: 70px 0;
    }

    .section-title {
        font-size: var(--text-3xl, 2.25rem);
    }

    .onetime-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .process-steps {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .process-step:not(:last-child)::after {
        display: none;
    }

    .cta-actions {
        flex-direction: column;
        align-items: center;
    }

    .offer-card {
        padding: 36px 28px;
    }

    .price-amount {
        font-size: 2.25rem;
    }

    /* Steps timeline mobile */
    .step {
        grid-template-columns: 60px 1fr;
        gap: var(--space-4, 1rem);
        padding: var(--space-6, 1.5rem) 0;
    }

    .step-number {
        font-size: var(--text-2xl, 1.75rem);
    }

    /* Services grid mobile */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* Package detail mobile */
    .package-detail__actions {
        flex-direction: column;
    }

    .package-price__amount {
        font-size: var(--text-4xl, 2.625rem);
    }
}
@media (max-width: 480px) {
    .section {
        padding: 60px 0;
    }

    .section--cta {
        padding: 50px 0;
    }

    .section-title {
        font-size: var(--text-2xl, 1.75rem);
    }

    .maintenance-card {
        padding: 28px 20px;
    }

    .onetime-card {
        padding: 24px 20px;
    }

    .step {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .step-number {
        margin-bottom: 0;
    }
}
/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .portfolio-card:hover,
    .contact-card:hover,
    .review-card:hover,
    .standard-card:hover,
    .galeria-item:hover {
        transform: none;
    }

    .portfolio-card:hover .portfolio-card__image img {
        transform: none;
    }

    .portfolio-card__overlay {
        opacity: 1;
    }

    .portfolio-card__overlay span {
        transform: none;
    }
}
/* ============================================
   11. LEGAL PAGES (Polityka, Regulamin)
   ============================================ */
.legal-content {
    max-width: 780px;
    margin: 0 auto;
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text);
}
.legal-content h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--color-dark);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.legal-content h2:first-of-type {
    margin-top: var(--space-4);
}
.legal-content p {
    margin-bottom: var(--space-4);
    color: var(--color-text-secondary);
}
.legal-content ul {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}
.legal-content li {
    margin-bottom: var(--space-2);
    color: var(--color-text-secondary);
    line-height: 1.7;
}
.legal-content li::marker {
    color: var(--color-primary);
}
.legal-content strong {
    color: var(--color-text);
    font-weight: 600;
}
.legal-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--duration-fast) var(--ease-out);
}
.legal-content a:hover {
    color: var(--color-primary-hover);
}
.legal-content em {
    color: var(--color-text-muted);
    font-style: italic;
}
/* ============================================
   FEATURE LIST & PAYMENT (shared across package pages)
   ============================================ */
/* Feature list */
.feature-list {
    list-style: none;
    padding: 0;
    margin: var(--space-8) 0;
}
.feature-list__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-base);
    color: var(--color-text);
    line-height: 1.6;
}
.feature-list__item:last-child {
    border-bottom: none;
}
.feature-list__check {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    margin-top: 2px;
}
/* Payment info box */
.payment-info {
    background: var(--color-bg-alt);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin: var(--space-8) 0;
    border-left: 4px solid var(--color-primary);
}
.payment-info__title {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}
.payment-info__text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
}
/* Gallery placeholder */
.gallery-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin: var(--space-8) 0;
}
.gallery-preview__item {
    aspect-ratio: 3 / 2;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.gallery-preview__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ============================================
   ABOUT PAGE (O nas)
   ============================================ */
.about-page {
    max-width: 1200px;
    margin: 0 auto;
}
/* Split section: image + text */
.about-page__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
    margin-bottom: var(--space-24);
}
.about-page__image {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.about-page__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.about-page__content .section-label {
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}
.about-page__heading {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 400;
    line-height: var(--leading-snug);
    color: var(--color-text);
    margin-bottom: var(--space-6);
}
.about-page__content p {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-body);
    margin-bottom: var(--space-4);
}
/* Stats bar */
.about-page__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
    padding: var(--space-12) var(--space-10);
    background: var(--color-dark);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-24);
    text-align: center;
}
.about-page__stat-number {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}
.about-page__stat-label {
    display: block;
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.02em;
}
/* Values grid */
.about-page__values {
    margin-bottom: var(--space-24);
}
.about-page__values .section-label {
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}
.about-page__values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-10);
}
.about-page__value {
    padding: var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: all var(--duration-base) var(--ease-out);
}
.about-page__value:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(255, 60, 0, 0.2);
}
.about-page__value-number {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    color: var(--color-primary);
    opacity: 0.3;
    margin-bottom: var(--space-3);
}
.about-page__value-title {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}
.about-page__value p {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-body);
}
/* Approach section */
.about-page__approach {
    margin-bottom: var(--space-16);
}
.about-page__approach .section-label {
    color: var(--color-primary);
    margin-bottom: var(--space-4);
}
.about-page__approach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-10);
}
.about-page__approach-item {
    padding: var(--space-8);
    border-left: 3px solid var(--color-primary);
}
.about-page__approach-item h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}
.about-page__approach-item p {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-body);
}
/* CTA Contact section overrides */
.cta-contact {
    background: var(--color-dark, #121C27);
    padding: var(--section-padding, 120px) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Radial glow behind CTA */
.cta-contact::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(255, 60, 0, 0.06) 0%, transparent 60%);
    pointer-events: none;
}
/* Grid texture overlay */
.cta-contact::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}
.cta-contact__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}
.cta-contact .section-title {
    margin-bottom: var(--space-4, 1rem);
}
.cta-contact__actions {
    display: flex;
    gap: var(--space-4, 1rem);
    flex-wrap: wrap;
    justify-content: center;
}
/* Primary button must be orange in dark CTA sections */
.section--cta .btn--primary,
.cta-contact .btn--primary {
    background: var(--color-primary, #FF3C00);
    color: #fff;
}
.section--cta .btn--primary:hover,
.cta-contact .btn--primary:hover {
    background: var(--color-primary-hover, #D45A15);
    box-shadow: 0 8px 30px rgba(255, 60, 0, 0.4);
}
/* Outline-light button for dark sections */
.section--dark .btn--outline-light,
.section--cta .btn--outline-light,
.cta-contact .btn--outline-light {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
}
.section--dark .btn--outline-light:hover,
.section--cta .btn--outline-light:hover,
.cta-contact .btn--outline-light:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
/* Primary button orange on offer cards (featured) */
.offer-card--featured .btn--primary {
    background: var(--color-primary, #FF3C00);
    color: #fff;
}
.offer-card--featured .btn--primary:hover {
    background: var(--color-primary-hover, #D45A15);
}
/* Maintenance featured card orange button */
.maintenance-card--featured .btn--primary {
    background: var(--color-primary, #FF3C00);
    color: #fff;
}
.maintenance-card--featured .btn--primary:hover {
    background: var(--color-primary-hover, #D45A15);
}
/* Footer social SVG icons */
.footer__social {
    display: flex;
    gap: 12px;
    margin-top: var(--space-4);
}
.footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.footer__social a:hover {
    background: var(--color-primary, #FF3C00);
    color: #fff;
    transform: translateY(-2px);
}
.footer__social svg {
    width: 16px;
    height: 16px;
}
/* Banner CTA button must be orange */
.banner .btn--primary {
    background: var(--color-primary, #FF3C00);
    color: #fff;
}
.banner .btn--primary:hover {
    background: var(--color-primary-hover, #D45A15);
    box-shadow: 0 8px 30px rgba(255, 60, 0, 0.4);
}
/* ============================================
   RESPONSIVE - ABOUT PAGE
   ============================================ */
@media (max-width: 1024px) {
    .about-page__split {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }
    .about-page__stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .about-page__approach-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .about-page__values-grid {
        grid-template-columns: 1fr;
    }
    .about-page__stats {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-page__heading {
        font-size: var(--text-2xl);
    }
    .price-display {
        font-size: var(--text-4xl);
    }
    .service-cards {
        grid-template-columns: 1fr;
    }
    .gallery-preview {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .gallery-preview {
        grid-template-columns: 1fr;
    }
    .cta-contact__actions {
        flex-direction: column;
        width: 100%;
    }
}
/* ============================================
   STRONY INTERNETOWE - Landing Page
   WOW premium design with expandable deliverables,
   horizontal process, opinions, order popup.
   ============================================ */
/* --- Section Dark text overrides --- */
.section--dark {
    background: var(--color-dark, #121C27);
}
.section--dark .section-title {
    color: #fff;
}
.section--dark .section-subtitle {
    color: rgba(255, 255, 255, 0.6);
}
/* --- Hero Strip (slim bar variant) --- */
.page-hero--strip {
    padding: calc(80px + var(--space-2, 0.5rem)) 0 var(--space-3, 0.75rem);
}
.page-hero--strip .container::after {
    display: none;
}
.offer-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8, 2rem);
    margin-top: var(--space-3, 0.75rem);
}
.offer-strip__content {
    flex: 1;
    min-width: 0;
}
.offer-strip__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 400;
    line-height: 1.2;
    color: #fff;
    margin: 0 0 var(--space-2, 0.5rem);
}
.offer-strip__subtitle {
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--text-sm, 0.9375rem);
    line-height: 1.5;
    margin: 0;
    max-width: 520px;
}
.offer-strip__actions {
    display: flex;
    gap: var(--space-3, 0.75rem);
    flex-shrink: 0;
}
/* --- Offer Hero (value-focused, no price) --- */
.page-hero--offer {
    padding-bottom: var(--space-12, 3rem);
}
.offer-hero {
    display: flex;
    gap: var(--space-12, 3rem);
    align-items: flex-start;
    margin-top: var(--space-6, 1.5rem);
}
.offer-hero__content {
    flex: 1;
    min-width: 0;
}
.offer-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.15;
    color: #fff;
    margin: var(--space-4, 1rem) 0 var(--space-4, 1rem);
}
.offer-hero__subtitle {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-base, 1rem);
    line-height: 1.6;
    margin: 0 0 var(--space-6, 1.5rem);
    max-width: 540px;
}
.offer-hero__highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-8, 2rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}
.offer-hero__highlights li {
    position: relative;
    padding-left: 28px;
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--text-sm, 0.9375rem);
    line-height: 1.5;
}
.offer-hero__highlights li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary, #FF3C00);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
}
.offer-hero__actions {
    display: flex;
    gap: var(--space-4, 1rem);
    flex-wrap: wrap;
}
/* --- Price Card (in hero right column) --- */
.offer-hero__card {
    flex-shrink: 0;
    width: 340px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-8, 2rem);
    position: relative;
}
/* Badge scoped to card - override the absolute offer-badge from offer cards */
.offer-badge--card {
    position: static;
    display: inline-block;
    background: var(--color-primary, #FF3C00);
    color: #fff;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    border-radius: var(--radius-sm, 6px);
    margin-bottom: var(--space-4, 1rem);
}
.price-amount--light {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.price-currency--light {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    display: block;
    margin-top: var(--space-1, 0.25rem);
}
.offer-hero__price {
    margin: var(--space-4, 1rem) 0 var(--space-2, 0.5rem);
}
.offer-hero__card-list {
    list-style: none;
    padding: 0;
    margin: var(--space-4, 1rem) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}
.offer-hero__card-list li {
    position: relative;
    padding-left: 20px;
    font-size: var(--text-sm, 0.875rem);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}
.offer-hero__card-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--color-primary, #FF3C00);
    font-weight: 700;
}
.offer-hero__hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: var(--space-6, 1.5rem) 0;
}
.offer-hero__trust {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
}
.offer-hero__trust-item {
    text-align: center;
}
.offer-hero__trust-item strong {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-lg, 1.1875rem);
    color: var(--color-primary, #FF3C00);
    line-height: 1.2;
    font-weight: 500;
}
.offer-hero__trust-item span {
    font-size: var(--text-xs, 0.75rem);
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* --- Hero Stats Block (value-focused hero right column) --- */
.offer-hero--value {
    align-items: center;
}
.offer-hero__stats-block {
    flex-shrink: 0;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
}
.offer-hero__stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg, 14px);
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    text-align: center;
    transition: border-color 300ms ease, background 300ms ease;
}
.offer-hero__stat-card:hover {
    border-color: rgba(255, 60, 0, 0.3);
    background: rgba(255, 60, 0, 0.04);
}
.offer-hero__stat-num {
    display: block;
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: clamp(2rem, 3vw, 2.75rem);
    color: var(--color-primary, #FF3C00);
    line-height: 1.1;
    font-weight: 400;
}
.offer-hero__stat-label {
    display: block;
    font-size: var(--text-sm, 0.875rem);
    color: rgba(255, 255, 255, 0.5);
    margin-top: var(--space-1, 0.25rem);
    letter-spacing: 0.02em;
}
/* --- Pricing Section (after value is shown) --- */
.pricing-section {
    display: flex;
    align-items: center;
    gap: var(--space-12, 3rem);
}
.pricing-section__text {
    flex: 1;
    min-width: 0;
}
.pricing-section__desc {
    font-size: var(--text-base, 1rem);
    color: var(--color-text-body, #4B535D);
    line-height: 1.7;
    margin: var(--space-4, 1rem) 0 var(--space-6, 1.5rem);
    max-width: 520px;
}
.pricing-section__benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}
.pricing-section__benefits li {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    font-size: var(--text-sm, 0.9375rem);
    color: var(--color-text-body, #4B535D);
    line-height: 1.5;
}
.pricing-section__benefits li svg {
    flex-shrink: 0;
}
.pricing-section__card {
    flex-shrink: 0;
    width: 360px;
    background: #fff;
    border: 2px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-8, 2rem);
    box-shadow: 0 12px 40px rgba(18, 28, 39, 0.08);
    position: relative;
}
.pricing-section__card .price-amount--light {
    color: var(--color-dark, #121C27);
}
.pricing-section__card .price-currency--light {
    color: var(--color-text-muted, #7a8894);
}
.pricing-section__card .offer-hero__card-list li {
    color: var(--color-text-body, #4B535D);
}
.pricing-section__card .offer-hero__hr {
    border-top-color: var(--color-border, #E5E2E0);
}
.pricing-section__guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    margin-top: var(--space-4, 1rem);
    font-size: var(--text-xs, 0.8125rem);
    color: var(--color-text-muted, #7a8894);
}
.pricing-section__guarantee svg {
    color: var(--color-primary, #FF3C00);
    flex-shrink: 0;
}
/* --- Trust Bar (micro social proof) --- */
.trust-bar {
    background: var(--color-dark, #121C27);
    border-top: 1px solid rgba(255, 60, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: var(--space-4, 1rem) 0;
}
.trust-bar__inner {
    display: flex;
    justify-content: center;
    gap: var(--space-10, 2.5rem);
    flex-wrap: wrap;
}
.trust-bar__item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    white-space: nowrap;
}
.trust-bar__item svg {
    color: var(--color-primary, #FF3C00);
    flex-shrink: 0;
}
/* --- Section Subtitle (shared) --- */
.section-subtitle {
    font-size: var(--text-base, 1rem);
    color: var(--color-text-body, #4B535D);
    line-height: 1.6;
    max-width: 600px;
    margin: var(--space-3, 0.75rem) 0 0;
}
/* --- Package Grid (2×2 value category cards) --- */
.package-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6, 1.5rem);
    margin-top: var(--space-10, 2.5rem);
}
.package-card {
    background: #fff;
    border: 1.5px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-lg, 14px);
    padding: var(--space-8, 2rem) var(--space-7, 1.75rem);
    transition: border-color 400ms cubic-bezier(0.4,0,0.2,1), box-shadow 400ms cubic-bezier(0.4,0,0.2,1), transform 400ms cubic-bezier(0.4,0,0.2,1);
}
.package-card:hover {
    border-color: var(--color-primary, #FF3C00);
    box-shadow: 0 8px 32px rgba(18, 28, 39, 0.08);
    transform: translateY(-4px);
}
.package-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-md, 10px);
    background: rgba(255, 60, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #FF3C00);
    margin-bottom: var(--space-5, 1.25rem);
    transition: background 250ms ease, color 250ms ease, transform 250ms ease;
}
.package-card:hover .package-card__icon {
    background: var(--color-primary, #FF3C00);
    color: #fff;
    transform: scale(1.08);
}
.package-card__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-lg, 1.1875rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin: 0 0 var(--space-2, 0.5rem);
}
.package-card__desc {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-muted, #7a8894);
    line-height: 1.6;
    margin: 0 0 var(--space-5, 1.25rem);
}
.package-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
}
.package-card__list li {
    position: relative;
    padding-left: 24px;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-body, #4B535D);
    line-height: 1.5;
}
.package-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary, #FF3C00);
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px;
}
/* --- Package Card Expandable Details --- */
.package-card__details {
    border-top: 1px solid var(--color-border, #E5E2E0);
    margin-top: var(--space-5, 1.25rem);
    padding-top: var(--space-4, 1rem);
}
.package-card__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    cursor: pointer;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-primary, #FF3C00);
    list-style: none;
    user-select: none;
    transition: color 200ms ease;
}
.package-card__toggle::-webkit-details-marker {
    display: none;
}
.package-card__toggle::marker {
    content: '';
}
.package-card__toggle svg {
    transition: transform 300ms ease;
    flex-shrink: 0;
}
.package-card__details[open] .package-card__toggle svg {
    transform: rotate(180deg);
}
.package-card__toggle:hover {
    color: var(--color-dark, #121C27);
}
.package-card__expanded {
    margin: var(--space-3, 0.75rem) 0 0;
    padding: 0;
}
.package-card__expanded p {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-body, #4B535D);
    line-height: 1.7;
    margin: 0 0 var(--space-3, 0.75rem);
}
.package-card__expanded p:last-child {
    margin-bottom: 0;
}
/* --- Process Cards (5 step cards) --- */
.process-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5, 1.25rem);
    margin-top: var(--space-10, 2.5rem);
}
.process-card {
    background: #fff;
    border: 1.5px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-lg, 14px);
    padding: var(--space-7, 1.75rem) var(--space-5, 1.25rem);
    text-align: center;
    position: relative;
    transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}
.process-card:hover {
    border-color: var(--color-primary, #FF3C00);
    box-shadow: 0 6px 24px rgba(18, 28, 39, 0.06);
    transform: translateY(-2px);
}
.process-card__num {
    display: block;
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: rgba(255, 60, 0, 0.12);
    line-height: 1;
    margin-bottom: var(--space-3, 0.75rem);
    font-weight: 400;
    transition: color 300ms ease;
}
.process-card:hover .process-card__num {
    color: rgba(255, 60, 0, 0.25);
}
.process-card__title {
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    color: var(--color-dark, #121C27);
    margin: 0 0 var(--space-2, 0.5rem);
}
.process-card__text {
    font-size: var(--text-sm, 0.8125rem);
    color: var(--color-text-muted, #7a8894);
    line-height: 1.6;
    margin: 0;
}
/* --- Process Flow (creative horizontal timeline on dark bg) --- */
.process-flow {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: var(--space-12, 3rem);
    padding: 0 var(--space-2, 0.5rem);
}
.process-flow__line {
    position: absolute;
    top: 28px;
    left: 56px;
    right: 56px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary, #FF3C00), rgba(255, 60, 0, 0.15));
    z-index: 0;
}
.process-flow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    max-width: 200px;
    position: relative;
    z-index: 1;
}
.process-flow__circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-dark, #121C27);
    border: 2px solid var(--color-primary, #FF3C00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #FF3C00);
    margin-bottom: var(--space-5, 1.25rem);
    box-shadow: 0 0 0 6px rgba(255, 60, 0, 0.08);
    transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
}
.process-flow__step:hover .process-flow__circle {
    background: var(--color-primary, #FF3C00);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(255, 60, 0, 0.15);
}
.process-flow__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 400;
    color: #fff;
    margin: 0 0 var(--space-2, 0.5rem);
}
.process-flow__text {
    font-size: var(--text-xs, 0.8125rem);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    margin: 0 0 var(--space-3, 0.75rem);
    padding: 0 var(--space-1, 0.25rem);
}
.process-flow__badge {
    display: inline-block;
    background: rgba(255, 60, 0, 0.12);
    color: var(--color-primary, #FF3C00);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 100px;
    letter-spacing: 0.02em;
}
/* --- Portfolio Marquee (infinite scroll) --- */
.portfolio-marquee {
    overflow: hidden;
    padding: var(--space-12, 3rem) 0;
    background: var(--color-dark, #121C27);
}
.portfolio-marquee__track {
    display: flex;
    gap: var(--space-6, 1.5rem);
    width: max-content;
    animation: marquee-scroll 40s linear infinite;
}
.portfolio-marquee__track:hover {
    animation-play-state: paused;
}
.portfolio-marquee__item {
    flex-shrink: 0;
}
.portfolio-marquee__card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg, 0.75rem);
}
.portfolio-marquee__card img {
    display: block;
    width: 260px;
    height: 165px;
    object-fit: cover;
    transition: transform 300ms ease;
}
.portfolio-marquee__card:hover img {
    transform: scale(1.05);
}
.portfolio-marquee__overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 28, 39, 0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 300ms ease;
    padding: 8px;
}
.portfolio-marquee__card:hover .portfolio-marquee__overlay {
    opacity: 1;
}
.portfolio-marquee__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
    white-space: nowrap;
}
.portfolio-marquee__btn--primary {
    background: var(--color-primary, #FF3C00);
    color: #fff;
}
.portfolio-marquee__btn--primary:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(255, 60, 0, 0.4);
}
.portfolio-marquee__btn--secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.portfolio-marquee__btn--secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.45);
}
.portfolio-marquee__btn--secondary svg {
    flex-shrink: 0;
}
.portfolio-marquee__domain {
    display: block;
    text-align: center;
    margin-top: var(--space-2, 0.5rem);
    font-size: var(--text-xs, 0.8125rem);
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.02em;
}
/* --- Browser Chrome Mockup (marquee items) --- */
.portfolio-marquee__browser {
    border-radius: 10px;
    overflow: hidden;
    background: #1a1a2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.portfolio-marquee__browser:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 60, 0, 0.4);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 60, 0, 0.25);
}
.portfolio-marquee__chrome {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.06);
}
.portfolio-marquee__dots {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}
.portfolio-marquee__dots i {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.portfolio-marquee__dots i:nth-child(1) { background: #ff5f57; }
.portfolio-marquee__dots i:nth-child(2) { background: #ffbd2e; }
.portfolio-marquee__dots i:nth-child(3) { background: #28c840; }
.portfolio-marquee__url {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 12px;
    border-radius: 4px;
    letter-spacing: 0.01em;
    font-family: var(--font-body, 'Inter', sans-serif);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.portfolio-marquee__screen {
    position: relative;
    overflow: hidden;
}
.portfolio-marquee__screen img {
    display: block;
    width: 260px;
    height: 165px;
    object-fit: cover;
    transition: transform 300ms ease;
}
.portfolio-marquee__browser:hover .portfolio-marquee__screen img {
    transform: scale(1.05);
}
.portfolio-marquee__browser:hover .portfolio-marquee__overlay {
    opacity: 1;
}
@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .portfolio-marquee__track {
        animation: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .portfolio-marquee__item {
        scroll-snap-align: start;
    }
}
/* --- Centered Hero (offer landing) --- */
.offer-hero--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}
.offer-hero--centered .offer-hero__title {
    max-width: 100%;
}
.offer-hero--centered .offer-hero__subtitle {
    max-width: 560px;
}
.offer-hero__actions--center {
    justify-content: center;
}
/* --- Trust Strip (inline in hero) --- */
.trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-6, 1.5rem);
}
.trust-strip__item {
    font-size: var(--text-sm, 0.875rem);
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    white-space: nowrap;
}
.trust-strip__sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 1.25rem;
}
/* --- Horizontal Process Timeline --- */
.process-horizontal {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    margin-top: var(--space-12, 3rem);
    padding-top: var(--space-8, 2rem);
}
/* Connecting line */
.process-horizontal__line {
    position: absolute;
    top: calc(var(--space-8, 2rem) + 22px);
    left: 40px;
    right: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary, #FF3C00) 0%, rgba(255, 60, 0, 0.15) 100%);
    z-index: 0;
}
.process-horizontal__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
    z-index: 1;
    max-width: 200px;
}
/* Circle marker */
.process-horizontal__marker {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-dark, #121C27);
    border: 2px solid var(--color-primary, #FF3C00);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-5, 1.25rem);
    position: relative;
    box-shadow: 0 0 0 6px var(--color-surface-alt, #F7F5F3);
    transition: transform 300ms ease, box-shadow 300ms ease;
}
.process__hstep.is-visible .process-horizontal__marker {
    animation: markerPop 0.5s ease forwards;
}
@keyframes markerPop {
    0% { transform: scale(0.7); opacity: 0; }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}
.process-horizontal__number {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-primary, #FF3C00);
    font-weight: 400;
    line-height: 1;
}
.process-horizontal__card {
    padding: 0 var(--space-2, 0.5rem);
}
.process-horizontal__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin: 0 0 var(--space-2, 0.5rem);
}
.process-horizontal__text {
    font-size: var(--text-xs, 0.8125rem);
    color: var(--color-text-body, #4B535D);
    line-height: 1.6;
    margin: 0;
}
/* --- Opinions Section --- */
.opinions-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6, 1.5rem);
    flex-wrap: wrap;
}
.opinions-header__text {
    flex: 1;
    min-width: 200px;
}
.google-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.google-badge__icon {
    flex-shrink: 0;
}
.google-badge__stars {
    display: flex;
    gap: 1px;
}
.google-badge__score {
    font-weight: 700;
    font-size: var(--text-lg, 1.125rem);
    color: var(--color-dark, #121C27);
    line-height: 1;
}
.google-badge__source {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #7a8894);
}
.google-badge__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.reviews-grid--offer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6, 1.5rem);
    margin-top: var(--space-10, 2.5rem);
}
/* --- Custom Projects Section (redesigned) --- */
.custom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6, 1.5rem);
    margin-top: var(--space-10, 2.5rem);
}
.custom-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg, 14px);
    padding: var(--space-7, 1.75rem);
    transition: border-color 300ms ease, background 300ms ease, transform 300ms ease;
}
.custom-card:hover {
    border-color: rgba(255, 60, 0, 0.3);
    background: rgba(255, 60, 0, 0.04);
    transform: translateY(-3px);
}
.custom-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 60, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #FF3C00);
    margin-bottom: var(--space-5, 1.25rem);
    transition: background 250ms ease, color 250ms ease;
}
.custom-card:hover .custom-card__icon {
    background: var(--color-primary, #FF3C00);
    color: #fff;
}
.custom-card__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 400;
    color: #fff;
    margin: 0 0 var(--space-2, 0.5rem);
}
.custom-card__text {
    font-size: var(--text-sm, 0.8125rem);
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
    margin: 0;
}
.custom-cta {
    display: flex;
    justify-content: center;
    gap: var(--space-4, 1rem);
    margin-top: var(--space-10, 2.5rem);
}
/* --- Section CTA (centered button below section) --- */
.section-cta {
    text-align: center;
}
/* --- Portfolio 3-col grid --- */
.portfolio__grid--3col {
    grid-template-columns: repeat(3, 1fr);
}
/* --- Order Popup - szerszy żeby pomieścić formularz wygodnie --- */
.popup--order {
    max-width: 760px;
}
.popup--info {
    max-width: 880px;
}
/* --- Form fields polished - większy line-height + spójna typografia --- */
.order-form__input,
.order-form__textarea,
.wycena__input,
.wycena__textarea,
.kt-form__input,
.kt-form__textarea {
    line-height: 1.55 !important;
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: 15px;
    padding: 12px 14px;
}
.order-form__textarea,
.wycena__textarea,
.kt-form__textarea {
    line-height: 1.6 !important;
    padding: 14px 16px;
}
.order-form__label,
.wycena__form label,
.kt-form__label {
    line-height: 1.4;
    margin-bottom: 6px;
}
/* RODO consent w popup wycena - widoczny checkbox + tekst zgody */
.wycena__consent {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    margin: 12px 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    cursor: pointer;
}
.wycena__consent input[type="checkbox"] {
    margin: 3px 0 0 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--color-primary, #FF3C00);
    cursor: pointer;
}
.wycena__consent a {
    color: var(--color-primary, #FF3C00);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wycena__consent a:hover { color: #fff; }
.wycena__consent.is-invalid { color: #ef4444; }
.wycena__consent.is-invalid input { outline: 2px solid #ef4444; outline-offset: 2px; }
.order-form__summary {
    background: rgba(255, 60, 0, 0.04);
    border: 1px solid rgba(255, 60, 0, 0.12);
    border-radius: var(--radius-md, 10px);
    padding: var(--space-5, 1.25rem);
    margin-bottom: var(--space-6, 1.5rem);
}
.order-form__product {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4, 1rem);
}
.order-form__product-name {
    font-weight: 600;
    color: var(--color-dark, #121C27);
    font-size: var(--text-base, 1rem);
}
.order-form__product-price {
    font-weight: 700;
    color: var(--color-primary, #FF3C00);
    font-size: var(--text-lg, 1.125rem);
    white-space: nowrap;
}
.order-form__product-includes {
    font-size: var(--text-xs, 0.8125rem);
    color: var(--color-text-muted, #7a8894);
    margin: var(--space-2, 0.5rem) 0 0;
    line-height: 1.5;
}
.order-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-4, 1rem);
}
.order-form__field--full {
    margin-bottom: var(--space-4, 1rem);
}
.order-form__label {
    display: block;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-dark, #121C27);
    margin-bottom: var(--space-1, 0.25rem);
}
.order-form__input,
.order-form__textarea {
    width: 100%;
    padding: var(--space-3, 0.75rem);
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm, 0.9375rem);
    font-family: var(--font-body, 'Inter', sans-serif);
    color: var(--color-dark, #121C27);
    background: #fff;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.order-form__input:focus,
.order-form__textarea:focus {
    outline: none;
    border-color: var(--color-primary, #FF3C00);
    box-shadow: 0 0 0 3px rgba(255, 60, 0, 0.08);
}
.order-form__input::placeholder,
.order-form__textarea::placeholder {
    color: var(--color-text-muted, #aab0b8);
}
.order-form__textarea {
    resize: vertical;
    min-height: 72px;
}
/* Payment radio */
.order-form__payment {
    border: none;
    padding: 0;
    margin: 0 0 var(--space-4, 1rem);
}
.order-form__payment legend {
    margin-bottom: var(--space-2, 0.5rem);
}
.order-form__radio {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    cursor: pointer;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-body, #4B535D);
    padding: var(--space-2, 0.5rem) 0;
    line-height: 1.4;
}
.order-form__radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.order-form__radio-mark {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border, #d1d5db);
    border-radius: 50%;
    position: relative;
    transition: all 200ms ease;
    margin-top: 1px;
}
.order-form__radio input[type="radio"]:checked + .order-form__radio-mark {
    border-color: var(--color-primary, #FF3C00);
}
.order-form__radio input[type="radio"]:checked + .order-form__radio-mark::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background: var(--color-primary, #FF3C00);
    border-radius: 50%;
}
/* Checkbox */
.order-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    cursor: pointer;
    font-size: var(--text-xs, 0.8125rem);
    color: var(--color-text-body, #4B535D);
    margin-bottom: var(--space-6, 1.5rem);
    line-height: 1.5;
}
.order-form__checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.order-form__check-mark {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border, #d1d5db);
    border-radius: 4px;
    position: relative;
    transition: all 200ms ease;
    margin-top: 1px;
}
.order-form__checkbox input[type="checkbox"]:checked + .order-form__check-mark {
    background: var(--color-primary, #FF3C00);
    border-color: var(--color-primary, #FF3C00);
}
.order-form__checkbox input[type="checkbox"]:checked + .order-form__check-mark::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.order-form__checkbox a {
    color: var(--color-primary, #FF3C00);
    text-decoration: underline;
}
.order-form__submit {
    margin-bottom: var(--space-6, 1.5rem);
}
.order-form__next-steps {
    background: var(--color-surface-alt, #F7F5F3);
    border-radius: var(--radius-md, 10px);
    padding: var(--space-5, 1.25rem);
}
.order-form__next-steps p {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-dark, #121C27);
    margin: 0 0 var(--space-2, 0.5rem);
}
.order-form__next-steps ol {
    list-style: decimal;
    padding-left: 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 0.25rem);
}
.order-form__next-steps li {
    font-size: var(--text-xs, 0.8125rem);
    color: var(--color-text-body, #4B535D);
    line-height: 1.5;
}
/* Order success state */
.order-form__success {
    text-align: center;
    padding: var(--space-10, 2.5rem) var(--space-6, 1.5rem);
}
.order-form__success-icon {
    margin-bottom: var(--space-4, 1rem);
}
.order-form__success-title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-2xl, 1.75rem);
    color: var(--color-dark, #121C27);
    margin-bottom: var(--space-3, 0.75rem);
}
.order-form__success-text {
    font-size: var(--text-sm, 0.9375rem);
    color: var(--color-text-body, #4B535D);
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto;
}
/* --- FAQ Grid (two-column, full width) --- */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-10, 2.5rem);
    margin-top: var(--space-10, 2.5rem);
}
.faq-col {
    display: flex;
    flex-direction: column;
}
.faq-item--dark {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.faq-col:first-child .faq-item--dark:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.faq-col:last-child .faq-item--dark:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.faq-item--dark summary {
    color: #fff;
}
.faq-item--dark summary:hover {
    color: var(--color-primary, #FF3C00);
}
.faq-item--dark .faq-answer {
    color: rgba(255, 255, 255, 0.6);
}
.faq-item--dark .faq-answer p {
    color: rgba(255, 255, 255, 0.6);
}
.faq-item--dark .faq-answer strong {
    color: #fff;
}
.faq-item--dark[open] summary::after {
    color: var(--color-primary, #FF3C00);
}
/* --- Order Flow (purchase process explanation) --- */
.order-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
    background: var(--color-surface-alt, #F7F5F3);
    border-radius: var(--radius-md, 10px);
    padding: var(--space-5, 1.25rem);
    margin-bottom: var(--space-6, 1.5rem);
}
.order-flow__step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
}
.order-flow__num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary, #FF3C00);
    color: #fff;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.order-flow__info strong {
    display: block;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-dark, #121C27);
    margin-bottom: 2px;
}
.order-flow__info span {
    font-size: var(--text-xs, 0.8125rem);
    color: var(--color-text-muted, #7a8894);
    line-height: 1.4;
}
/* --- Order Invoice Note --- */
.order-form__invoice-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    font-size: var(--text-xs, 0.8125rem);
    color: var(--color-text-muted, #7a8894);
    line-height: 1.5;
    margin-top: var(--space-2, 0.5rem);
    padding: var(--space-4, 1rem);
    background: var(--color-surface-alt, #F7F5F3);
    border-radius: var(--radius-md, 8px);
}
.order-form__invoice-note svg {
    flex-shrink: 0;
    color: var(--color-primary, #FF3C00);
    margin-top: 2px;
}
/* --- Order Contact Alternatives --- */
.order-contact {
    margin-top: var(--space-6, 1.5rem);
    padding-top: var(--space-6, 1.5rem);
    border-top: 1px solid var(--color-border, #E5E2E0);
}
.order-contact__label {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-muted, #7a8894);
    margin: 0 0 var(--space-4, 1rem);
    text-align: center;
}
.order-contact__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 240px));
    gap: var(--space-3, 0.75rem);
    justify-content: center;     /* 2 boxy wycentrowane na środku */
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.order-contact__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    padding: var(--space-4, 1rem) var(--space-3, 0.75rem);
    background: var(--color-surface-alt, #F7F5F3);
    border-radius: var(--radius-md, 10px);
    text-decoration: none;
    text-align: center;
    transition: background 200ms ease, transform 200ms ease;
}
.order-contact__item:hover {
    background: rgba(255, 60, 0, 0.06);
    transform: translateY(-2px);
}
.order-contact__item svg {
    color: var(--color-primary, #FF3C00);
}
.order-contact__item strong {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-dark, #121C27);
}
/* --- Section Alt (warm grey alternate background) --- */
.section--alt {
    background: var(--color-surface-alt, #F7F5F3);
}
/* --- Purchase Hero (centered price block) --- */
/* --- Purchase Box: premium split-layout card --- */
.purchase-box {
    background: #fff;
    border: 1.5px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-xl, 20px);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(18, 28, 39, 0.06);
    margin-bottom: var(--space-16, 4rem);
}
.purchase-box__header {
    text-align: center;
    padding: var(--space-10, 2.5rem) var(--space-8, 2rem) var(--space-6, 1.5rem);
    border-bottom: 1px solid var(--color-border, #E5E2E0);
}
.purchase-box__label {
    display: inline-block;
    background: var(--color-primary, #FF3C00);
    color: #fff;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 20px;
    border-radius: 100px;
    margin-bottom: var(--space-4, 1rem);
}
.purchase-box__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin: 0 0 var(--space-3, 0.75rem);
}
.purchase-box__lead {
    font-size: var(--text-lg, 1.125rem);
    color: var(--color-text-body, #4B535D);
    line-height: 1.6;
    max-width: 580px;
    margin: 0 auto;
}
.purchase-box__body {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 0;
}
.purchase-box__left {
    padding: var(--space-8, 2rem) var(--space-8, 2rem) var(--space-8, 2rem) var(--space-10, 2.5rem);
    display: flex;
    align-items: center;
}
.purchase-box__checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    width: 100%;
}
.purchase-box__checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
    font-size: var(--text-base, 1rem);
    color: var(--color-dark, #121C27);
    line-height: 1.5;
}
.purchase-box__checklist li svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.purchase-box__right {
    background: var(--color-dark, #121C27);
    padding: var(--space-8, 2rem);
    display: flex;
    align-items: center;
    justify-content: center;
}
.purchase-box__price-card {
    text-align: center;
    width: 100%;
}
.purchase-box__price-badge {
    display: inline-block;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--space-4, 1rem);
}
.purchase-box__price {
    margin-bottom: var(--space-2, 0.5rem);
}
.purchase-box__amount {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 400;
    color: #fff;
    line-height: 1;
    display: block;
}
.purchase-box__currency {
    display: block;
    font-size: var(--text-lg, 1.125rem);
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    margin-top: var(--space-1, 0.25rem);
}
.purchase-box__price-note {
    font-size: var(--text-sm, 0.875rem);
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 var(--space-6, 1.5rem);
}
.purchase-box__price-card .btn--primary {
    width: 100%;
    justify-content: center;
}
.purchase-box__perks {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 0.5rem);
    margin-top: var(--space-5, 1.25rem);
}
.purchase-box__perks span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
    color: rgba(255, 255, 255, 0.6);
    justify-content: center;
}
.purchase-box__perks svg {
    color: var(--color-primary, #FF3C00);
    flex-shrink: 0;
}
.purchase-box__after {
    margin-top: var(--space-6, 1.5rem);
    padding-top: var(--space-5, 1.25rem);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: var(--text-sm, 0.875rem);
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
    text-align: left;
}
.purchase-box__after strong {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-1, 0.25rem);
}
/* --- Purchase Journey (vertical timeline) --- */
.purchase-journey {
    max-width: 760px;
    margin: 0 auto;
}
.purchase-journey__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-3xl, 2.25rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin: 0 0 var(--space-3, 0.75rem);
    text-align: center;
}
.purchase-journey__subtitle {
    font-size: var(--text-lg, 1.125rem);
    color: var(--color-text-body, #4B535D);
    text-align: center;
    margin: 0 0 var(--space-12, 3rem);
    line-height: 1.6;
}
.purchase-journey__timeline {
    position: relative;
    padding-left: 64px;
}
.purchase-journey__line {
    position: absolute;
    left: 23px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--color-primary, #FF3C00) 0%, rgba(255, 60, 0, 0.12) 100%);
    border-radius: 2px;
}
.purchase-journey__step {
    position: relative;
    padding-bottom: var(--space-8, 2rem);
}
.purchase-journey__step:last-child {
    padding-bottom: 0;
}
.purchase-journey__marker {
    position: absolute;
    left: -64px;
    top: 4px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--color-primary, #FF3C00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-base, 1rem);
    color: var(--color-primary, #FF3C00);
    font-weight: 400;
    z-index: 1;
    box-shadow: 0 0 0 6px var(--color-surface-alt, #F7F5F3), 0 4px 12px rgba(255, 60, 0, 0.1);
    transition: transform 300ms ease, background 300ms ease, color 300ms ease, box-shadow 300ms ease;
}
.purchase-journey__step:hover .purchase-journey__marker {
    background: var(--color-primary, #FF3C00);
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 0 0 6px var(--color-surface-alt, #F7F5F3), 0 6px 20px rgba(255, 60, 0, 0.25);
}
.purchase-journey__marker--done {
    background: var(--color-primary, #FF3C00);
    color: #fff;
    font-size: 1.25rem;
    border-color: var(--color-primary, #FF3C00);
}
.purchase-journey__step:hover .purchase-journey__marker--done {
    background: #d4540f;
    border-color: #d4540f;
}
.purchase-journey__card {
    background: #fff;
    border: 1.5px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-6, 1.5rem) var(--space-7, 1.75rem);
    transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}
.purchase-journey__step:hover .purchase-journey__card {
    border-color: rgba(255, 60, 0, 0.3);
    box-shadow: 0 8px 28px rgba(18, 28, 39, 0.08);
    transform: translateX(4px);
}
.purchase-journey__who {
    display: inline-block;
    font-size: var(--text-xs, 0.8125rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: var(--space-3, 0.75rem);
}
.purchase-journey__who--you {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}
.purchase-journey__who--us {
    background: rgba(255, 60, 0, 0.12);
    color: var(--color-primary, #FF3C00);
}
.purchase-journey__who--together {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}
.purchase-journey__who--done {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}
.purchase-journey__card-title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-xl, 1.375rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin: 0 0 var(--space-2, 0.5rem);
}
.purchase-journey__card-text {
    font-size: var(--text-base, 1rem);
    color: var(--color-text-body, #4B535D);
    line-height: 1.7;
    margin: 0;
}
.purchase-journey__time {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    margin-top: var(--space-3, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-primary, #FF3C00);
    background: rgba(255, 60, 0, 0.06);
    padding: 4px 12px;
    border-radius: 100px;
}
/* CTA button after journey timeline */
.purchase-journey__cta {
    text-align: center;
    margin-top: var(--space-12, 3rem);
    padding-top: var(--space-8, 2rem);
    border-top: 1px solid var(--color-border, #E5E2E0);
}
.purchase-journey__cta .btn {
    font-size: var(--text-lg, 1.125rem);
    padding: var(--space-5, 1.25rem) var(--space-10, 2.5rem);
}
.purchase-journey__cta-note {
    display: block;
    margin-top: var(--space-3, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-muted, #7a8894);
}
/* --- Responsive: Strony Internetowe Landing --- */
@media (max-width: 1024px) {
    .offer-hero {
        flex-direction: column;
        gap: var(--space-8, 2rem);
    }
    .offer-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4, 1rem);
    }
    .offer-strip__actions {
        width: 100%;
    }
    .offer-hero__stats-block {
        width: 100%;
        flex-direction: row;
        justify-content: center;
    }
    .offer-hero__stat-card {
        flex: 1;
    }
    .pricing-section {
        flex-direction: column;
        text-align: center;
    }
    .pricing-section__text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .pricing-section__card {
        width: 100%;
        max-width: 400px;
    }
    .portfolio__grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Process flow: 3 visible + 2 below */
    .process-flow {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-6, 1.5rem) var(--space-4, 1rem);
    }
    .process-flow__line {
        display: none;
    }
    .process-flow__step {
        flex: 0 0 calc(33.333% - var(--space-4, 1rem));
        max-width: 220px;
    }

    /* Process cards: wrap on tablet */
    .process-cards {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Horizontal process → scroll on tablet */
    .process-horizontal {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: var(--space-4, 1rem);
        padding-bottom: var(--space-4, 1rem);
    }
    .process-horizontal__step {
        min-width: 160px;
    }

    .reviews-grid--offer {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Custom grid: 2 columns on tablet */
    .custom-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* FAQ grid: single column on tablet */
    .faq-grid {
        grid-template-columns: 1fr;
    }
    .faq-col:last-child .faq-item--dark:first-child {
        border-top: none;
    }

    /* Purchase box: stack on tablet */
    .purchase-box__body {
        grid-template-columns: 1fr;
    }
    .purchase-box__left {
        padding: var(--space-6, 1.5rem) var(--space-6, 1.5rem);
    }
    .purchase-box__right {
        padding: var(--space-8, 2rem) var(--space-6, 1.5rem);
    }

    /* Purchase journey: full width on tablet */
    .purchase-journey {
        max-width: 100%;
    }
}
@media (max-width: 768px) {
    .offer-strip__actions {
        flex-direction: column;
    }
    .offer-strip__actions .btn {
        width: 100%;
        justify-content: center;
    }
    .offer-hero__actions {
        flex-direction: column;
    }
    .offer-hero__actions .btn {
        width: 100%;
        justify-content: center;
    }
    .portfolio__grid--3col {
        grid-template-columns: 1fr;
    }
    .trust-bar__inner {
        gap: var(--space-4, 1rem);
    }
    .trust-bar__item span {
        font-size: var(--text-xs, 0.8125rem);
    }

    /* Package grid: 1 column on mobile */
    .package-grid {
        grid-template-columns: 1fr;
    }

    /* Process cards: 2 columns on mobile */
    .process-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .process-card:last-child {
        grid-column: 1 / -1;
    }

    /* Process flow: 2 col on mobile */
    .process-flow__step {
        flex: 0 0 calc(50% - var(--space-4, 1rem));
    }

    /* Trust strip: wrap on mobile */
    .trust-strip {
        flex-wrap: wrap;
        gap: var(--space-2, 0.5rem);
    }

    /* Marquee items smaller on mobile */
    .portfolio-marquee__card img,
    .portfolio-marquee__screen img {
        width: 300px;
        height: 188px;
    }

    /* Browser chrome: smaller dots */
    .portfolio-marquee__dots i {
        width: 8px;
        height: 8px;
    }
    .portfolio-marquee__chrome {
        padding: 6px 10px;
    }

    /* Purchase box: tighter on mobile */
    .purchase-box__header {
        padding: var(--space-6, 1.5rem) var(--space-5, 1.25rem) var(--space-5, 1.25rem);
    }
    .purchase-box__left {
        padding: var(--space-5, 1.25rem);
    }
    .purchase-box__right {
        padding: var(--space-6, 1.5rem) var(--space-5, 1.25rem);
    }
    .purchase-box__amount {
        font-size: 2.5rem;
    }

    /* Purchase journey: tighter on mobile */
    .purchase-journey__title {
        font-size: var(--text-2xl, 1.75rem);
    }
    .purchase-journey__subtitle {
        font-size: var(--text-base, 1rem);
    }
    .purchase-journey__timeline {
        padding-left: 50px;
    }
    .purchase-journey__marker {
        width: 40px;
        height: 40px;
        left: -50px;
        font-size: 0.9375rem;
        border-width: 2px;
    }
    .purchase-journey__line {
        left: 18px;
        width: 2px;
    }
    .purchase-journey__card {
        padding: var(--space-5, 1.25rem);
    }
    .purchase-journey__card-title {
        font-size: var(--text-lg, 1.125rem);
    }
    .purchase-journey__card-text {
        font-size: var(--text-sm, 0.9375rem);
    }
    .purchase-journey__cta .btn {
        width: 100%;
        justify-content: center;
    }

    /* Stats block: stack on mobile */
    .offer-hero__stats-block {
        flex-direction: column;
    }

    /* Process: vertical on mobile */
    .process-horizontal {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding-top: 0;
        overflow-x: visible;
    }
    .process-horizontal__line {
        display: none;
    }
    .process-horizontal__step {
        flex-direction: row;
        text-align: left;
        max-width: 100%;
        padding: var(--space-5, 1.25rem) 0;
        border-bottom: 1px solid var(--color-border, #E5E2E0);
        gap: var(--space-4, 1rem);
        width: 100%;
    }
    .process-horizontal__step:last-child {
        border-bottom: none;
    }
    .process-horizontal__marker {
        margin-bottom: 0;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        box-shadow: none;
    }
    .process-horizontal__card {
        padding: 0;
    }

    .reviews-grid--offer {
        grid-template-columns: 1fr;
    }
    .opinions-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Custom grid: 1 col on mobile */
    .custom-grid {
        grid-template-columns: 1fr;
    }
    .custom-cta {
        flex-direction: column;
        align-items: stretch;
    }
    .custom-cta .btn {
        justify-content: center;
    }

    .order-form__grid {
        grid-template-columns: 1fr;
    }
    .order-form__product {
        flex-direction: column;
        gap: var(--space-1, 0.25rem);
    }
    .order-contact__grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .offer-strip__title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }
    .offer-hero__title {
        font-size: clamp(1.75rem, 6vw, 2.25rem);
    }
    .offer-hero__trust {
        gap: var(--space-2, 0.5rem);
    }
    .offer-hero__trust-item strong {
        font-size: var(--text-base, 1rem);
    }
    .trust-bar__inner {
        flex-direction: column;
        align-items: center;
        gap: var(--space-2, 0.5rem);
    }

    /* Process cards: 1 column on small mobile */
    .process-cards {
        grid-template-columns: 1fr;
    }
    .process-card:last-child {
        grid-column: auto;
    }

    /* Process flow: 1 col on small mobile */
    .process-flow {
        gap: var(--space-6, 1.5rem);
    }
    .process-flow__step {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Trust strip: column on small mobile */
    .trust-strip {
        flex-direction: column;
        gap: var(--space-1, 0.25rem);
    }
    .trust-strip__sep {
        display: none;
    }

    /* Purchase box: even smaller on small mobile */
    .purchase-box__amount {
        font-size: 2rem;
    }
    .purchase-journey__title {
        font-size: var(--text-xl, 1.375rem);
    }
}
/* ============================================
   WOW POLISH ("PAZUR") - Premium micro-interactions
   Business-like elegance with refined depth
   ============================================ */
/* --- CTA buttons: subtle idle glow pulse (draws eye to conversion) --- */
.purchase-box__price-card .btn--primary,
.purchase-journey__cta .btn--primary,
.custom-cta .btn--primary {
    background: var(--color-primary, #FF3C00);
    color: #fff;
    position: relative;
    overflow: hidden;
    animation: cta-glow 3s ease-in-out infinite;
}
@keyframes cta-glow {
    0%, 100% { box-shadow: 0 4px 16px rgba(255, 60, 0, 0.3); }
    50% { box-shadow: 0 8px 32px rgba(255, 60, 0, 0.45), 0 0 48px rgba(255, 60, 0, 0.12); }
}
/* Shimmer sweep on hover */
.purchase-box__price-card .btn--primary::after,
.purchase-journey__cta .btn--primary::after,
.custom-cta .btn--primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: none;
    pointer-events: none;
}
.purchase-box__price-card .btn--primary:hover::after,
.purchase-journey__cta .btn--primary:hover::after,
.custom-cta .btn--primary:hover::after {
    animation: btn-shimmer-sweep 0.6s ease forwards;
}
@keyframes btn-shimmer-sweep {
    0%   { left: -60%; }
    100% { left: 120%; }
}
/* --- Package cards: premium hover with orange glow ring --- */
.package-card {
    position: relative;
}
.package-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.3), rgba(255, 60, 0, 0.05));
    opacity: 0;
    transition: opacity 400ms ease;
    z-index: -1;
    filter: blur(8px);
}
.package-card:hover::before {
    opacity: 1;
}
.package-card:hover {
    border-color: var(--color-primary, #FF3C00);
    box-shadow: 0 20px 52px rgba(255, 60, 0, 0.08), 0 4px 16px rgba(18, 28, 39, 0.05);
    transform: translateY(-6px);
}
.package-card__icon {
    box-shadow: 0 0 0 0 rgba(255, 60, 0, 0);
    transition: background 300ms ease, color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}
.package-card:hover .package-card__icon {
    box-shadow: 0 0 0 8px rgba(255, 60, 0, 0.06);
    transform: scale(1.1) rotate(-3deg);
}
/* --- Process flow circles: glowing ring on hover --- */
.process-flow__step:hover .process-flow__circle {
    box-shadow: 0 0 0 10px rgba(255, 60, 0, 0.12), 0 0 28px rgba(255, 60, 0, 0.18);
}
/* --- Process horizontal markers: deeper ring glow --- */
.process-horizontal__marker {
    transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease, color 300ms ease;
}
.process__hstep:hover .process-horizontal__marker {
    background: var(--color-primary, #FF3C00);
    color: #fff;
    transform: scale(1.12);
    box-shadow: 0 0 0 8px rgba(255, 60, 0, 0.1), 0 4px 16px rgba(255, 60, 0, 0.2);
}
/* --- Portfolio browser: orange glow rim on hover --- */
.portfolio-marquee__browser:hover {
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.35), 0 0 40px rgba(255, 60, 0, 0.06);
}
/* Chrome dots: pulse on hover */
.portfolio-marquee__browser:hover .portfolio-marquee__dots i:nth-child(1) {
    box-shadow: 0 0 6px rgba(255, 95, 87, 0.5);
}
.portfolio-marquee__browser:hover .portfolio-marquee__dots i:nth-child(2) {
    box-shadow: 0 0 6px rgba(255, 189, 46, 0.5);
}
.portfolio-marquee__browser:hover .portfolio-marquee__dots i:nth-child(3) {
    box-shadow: 0 0 6px rgba(40, 200, 64, 0.5);
}
/* --- Review cards: orange left accent on hover --- */
.review-card {
    border-left: 3px solid transparent;
}
.review-card:hover {
    border-left-color: var(--color-primary, #FF3C00);
    box-shadow: 0 16px 40px rgba(18, 28, 39, 0.08);
}
/* --- Custom project cards: top gradient line reveal --- */
.custom-card {
    position: relative;
    overflow: hidden;
}
.custom-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary, #FF3C00) 50%, transparent 100%);
    opacity: 0;
    transform: scaleX(0);
    transition: opacity 400ms ease, transform 400ms ease;
}
.custom-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}
.custom-card:hover .custom-card__icon {
    transform: scale(1.1);
}
/* --- Purchase box: premium price presentation --- */
.purchase-box__amount {
    text-shadow: 0 2px 12px rgba(255, 255, 255, 0.08);
    position: relative;
}
.purchase-box__label {
    animation: badge-breathe 4s ease-in-out infinite;
    box-shadow: 0 2px 8px rgba(255, 60, 0, 0.2);
}
@keyframes badge-breathe {
    0%, 100% { transform: translateY(0); box-shadow: 0 2px 8px rgba(255, 60, 0, 0.2); }
    50% { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(255, 60, 0, 0.3); }
}
/* --- Purchase journey: marker hover glow --- */
.purchase-journey__step:hover .purchase-journey__marker {
    box-shadow: 0 0 0 8px rgba(255, 60, 0, 0.08), 0 8px 24px rgba(255, 60, 0, 0.2);
}
/* Timeline line: subtle glow */
.purchase-journey__line {
    box-shadow: 0 0 8px rgba(255, 60, 0, 0.08);
}
/* Who badges: hover lift */
.purchase-journey__who {
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.purchase-journey__step:hover .purchase-journey__who {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
/* Time badges: subtle pulse */
.purchase-journey__time {
    transition: background 250ms ease, transform 200ms ease;
}
.purchase-journey__step:hover .purchase-journey__time {
    background: rgba(255, 60, 0, 0.1);
    transform: translateY(-1px);
}
/* --- FAQ items on dark: left accent on open --- */
.faq-item--dark {
    border-left: 3px solid transparent;
    transition: border-color 300ms ease, padding-left 300ms ease;
    padding-left: 0;
}
.faq-item--dark[open] {
    border-left-color: var(--color-primary, #FF3C00);
    padding-left: var(--space-4, 1rem);
}
/* --- Google badge: subtle hover enhancement --- */
.google-badge {
    transition: transform 300ms ease, box-shadow 300ms ease;
}
.google-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
/* --- Section titles: accent underline (below-fold sections only) --- */
.purchase-journey__title {
    position: relative;
    display: inline-block;
}
.purchase-journey__title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary, #FF3C00), rgba(255, 60, 0, 0.3));
    border-radius: 2px;
    margin: var(--space-3, 0.75rem) auto 0;
}
/* --- Offer strip: subtle text glow on title --- */
.offer-strip__title {
    text-shadow: 0 0 40px rgba(255, 60, 0, 0.08);
}
/* --- Section backgrounds: subtle grid texture on dark sections --- */
.section--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}
.section--dark {
    position: relative;
}
.section--dark > .container {
    position: relative;
    z-index: 1;
}
/* --- Orange accent strip between sections --- */
.section--alt {
    border-top: 2px solid rgba(255, 60, 0, 0.08);
}
/* --- Smooth focus states (accessibility + wow) --- */
.btn:focus-visible,
.package-card__toggle:focus-visible,
.faq-item--dark summary:focus-visible {
    outline: 2px solid var(--color-primary, #FF3C00);
    outline-offset: 3px;
    border-radius: var(--radius-sm, 6px);
}
/* --- Reduced motion: disable all wow animations --- */
@media (prefers-reduced-motion: reduce) {
    .purchase-box__price-card .btn--primary,
    .purchase-journey__cta .btn--primary,
    .custom-cta .btn--primary {
        animation: none;
    }
    .purchase-box__label {
        animation: none;
    }
    .package-card::before {
        display: none;
    }
    .custom-card::before {
        transition: none;
    }
}
/* =============================================
   v6.9.3 - /strony-internetowe/ rework styles
   ============================================= */
/* --- Hero strip even narrower --- */
.page-hero--strip {
    padding: calc(72px + var(--space-1, 0.25rem)) 0 var(--space-2, 0.5rem);
}
/* --- Subtitle: full width, no mid-sentence breaks --- */
.section-subtitle--wide {
    max-width: 100%;
}
.offer-strip__subtitle {
    max-width: 100%;
}
/* --- Trust strip: icons + cleaner spacing --- */
.trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.trust-strip__item svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.trust-strip__sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: inline-block;
}
/* --- Package section: tighter padding --- */
#pakiet {
    padding-top: var(--space-12, 3rem);
    padding-bottom: var(--space-12, 3rem);
}
/* --- Process flow: "who" labels (Ty / Arlek / Razem) --- */
.process-flow__who {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 2px 10px;
    border-radius: 20px;
    margin-bottom: var(--space-2, 0.5rem);
}
.process-flow__step[data-who="ty"] .process-flow__who {
    background: rgba(255, 60, 0, 0.15);
    color: var(--color-primary, #FF3C00);
}
.process-flow__step[data-who="my"] .process-flow__who {
    background: rgba(59, 130, 246, 0.15);
    color: #60A5FA;
}
.process-flow__step[data-who="razem"] .process-flow__who {
    background: rgba(52, 211, 153, 0.15);
    color: #34D399;
}
/* --- Custom cards: number style instead of icon --- */
.custom-card__number {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 2rem;
    font-weight: 400;
    color: rgba(255, 60, 0, 0.2);
    line-height: 1;
    margin-bottom: var(--space-3, 0.75rem);
    transition: color 300ms ease;
}
.custom-card:hover .custom-card__number {
    color: var(--color-primary, #FF3C00);
}
/* --- Custom grid: 2x2 with better gaps --- */
.custom-grid--2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6, 1.5rem);
    margin-top: var(--space-10, 2.5rem);
}
/* --- Section dark subtitle override --- */
.section--dark .section-subtitle--light {
    color: rgba(255, 255, 255, 0.55);
}
/* --- Smooth global transitions override (no jumps) --- */
.package-card,
.custom-card,
.review-card,
.process-flow__step,
.portfolio-marquee__browser,
.faq-item--dark {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- Portfolio grid: 3-col for 9 items --- */
.portfolio__grid--3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6, 1.5rem);
}
@media (max-width: 768px) {
    .custom-grid--2x2 {
        grid-template-columns: 1fr;
    }
    .portfolio__grid--3col {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .portfolio__grid--3col {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* =============================================
   v6.9.4 - Purchase box, marquee & FAQ polish
   ============================================= */
/* --- Portfolio marquee: edge fade masks --- */
.portfolio-marquee {
    position: relative;
    overflow: hidden;
}
.portfolio-marquee::before,
.portfolio-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.portfolio-marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-dark, #121C27) 0%, transparent 100%);
}
.portfolio-marquee::after {
    right: 0;
    background: linear-gradient(270deg, var(--color-dark, #121C27) 0%, transparent 100%);
}
/* Smoother marquee animation timing */
.portfolio-marquee__track {
    animation-timing-function: linear;
}
/* Marquee items: slight zoom on hover for depth */
.portfolio-marquee__item {
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.portfolio-marquee__item:hover {
    transform: scale(1.03);
    z-index: 1;
}
/* Browser URL bar: subtle gradient bg */
.portfolio-marquee__chrome {
    background: linear-gradient(180deg, #2a2a2a 0%, #222 100%);
}
/* Overlay: smoother fade in */
.portfolio-marquee__overlay {
    transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1),
                backdrop-filter 350ms ease;
}
/* --- FAQ: enhanced polish --- */
/* FAQ section header: accent line under title */
#faq .section-title {
    position: relative;
    display: inline-block;
}
#faq .section-title::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary, #FF3C00), rgba(255, 60, 0, 0.3));
    border-radius: 2px;
    margin: var(--space-3, 0.75rem) auto 0;
}
/* FAQ items: smoother expand animation */
.faq-item--dark .faq-answer {
    overflow: hidden;
    animation: faq-expand 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes faq-expand {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        max-height: 300px;
        transform: translateY(0);
    }
}
/* FAQ items: question number decorators */
.faq-col .faq-item--dark {
    counter-increment: faq-counter;
}
.faq-item--dark summary::before {
    content: counter(faq-counter, decimal-leading-zero);
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-sm, 0.875rem);
    color: rgba(255, 60, 0, 0.35);
    margin-right: var(--space-3, 0.75rem);
    font-weight: 400;
    min-width: 1.5em;
    transition: color 300ms ease;
}
.faq-item--dark[open] summary::before,
.faq-item--dark summary:hover::before {
    color: var(--color-primary, #FF3C00);
}
/* FAQ counter reset per column */
.faq-col {
    counter-reset: faq-counter;
}
/* FAQ bottom CTA */
.faq-bottom-cta {
    text-align: center;
    margin-top: var(--space-12, 3rem);
    padding-top: var(--space-8, 2rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.faq-bottom-cta__text {
    font-size: var(--text-lg, 1.125rem);
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 var(--space-5, 1.25rem);
}
.faq-bottom-cta__text strong {
    color: #fff;
}
.faq-bottom-cta .btn--outline-light {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.faq-bottom-cta .btn--outline-light:hover {
    border-color: var(--color-primary, #FF3C00);
    color: var(--color-primary, #FF3C00);
}
/* =============================================
   v6.9.8 - Expandable cards: clickable offer grid
   ============================================= */
/* --- Expand Grid --- */
.expand-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4, 1rem);
    margin-top: var(--space-10, 2.5rem);
    align-items: start;
}
/* --- Expand Card (details element) --- */
.expand-card {
    background: #fff;
    border: 1.5px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    transition: border-color 300ms ease, box-shadow 300ms ease;
}
.expand-card:hover {
    border-color: rgba(18, 28, 39, 0.2);
}
.expand-card[open] {
    border-color: rgba(255, 60, 0, 0.35);
    box-shadow: 0 6px 24px rgba(18, 28, 39, 0.06);
}
/* --- Summary (clickable header) --- */
.expand-card__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
}
.expand-card__summary::-webkit-details-marker {
    display: none;
}
.expand-card__summary::marker {
    display: none;
    content: '';
}
/* --- Icon --- */
.expand-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--color-dark, #121C27);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 300ms ease, transform 200ms ease;
}
.expand-card__icon svg {
    stroke: #fff;
}
.expand-card[open] .expand-card__icon {
    background: var(--color-primary, #FF3C00);
    transform: scale(1.05);
}
/* --- Title & brief --- */
.expand-card__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: var(--text-base, 1rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin: 0;
    line-height: 1.3;
}
.expand-card__brief {
    font-size: var(--text-xs, 0.8125rem);
    color: var(--color-text-muted, #7a8894);
    margin: 3px 0 0;
    line-height: 1.4;
}
/* --- Inline badge (e.g. "12 mies.") --- */
.expand-card__badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255, 60, 0, 0.08);
    color: var(--color-primary, #FF3C00);
    border-radius: 100px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    vertical-align: middle;
    margin-left: 6px;
}
/* --- Plus toggle icon --- */
.expand-card__plus {
    width: 28px;
    height: 28px;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    border-radius: 50%;
    border: 1.5px solid var(--color-border, #E5E2E0);
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 300ms ease,
                background 300ms ease;
}
.expand-card__plus::before,
.expand-card__plus::after {
    content: '';
    position: absolute;
    background: var(--color-dark, #121C27);
    border-radius: 1px;
    transition: background 200ms ease;
}
.expand-card__plus::before {
    width: 12px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.expand-card__plus::after {
    width: 2px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.expand-card[open] .expand-card__plus {
    transform: rotate(45deg);
    border-color: var(--color-primary, #FF3C00);
    background: rgba(255, 60, 0, 0.06);
}
.expand-card[open] .expand-card__plus::before,
.expand-card[open] .expand-card__plus::after {
    background: var(--color-primary, #FF3C00);
}
/* --- Expanded body --- */
.expand-card__body {
    padding: 0 var(--space-5, 1.25rem) var(--space-5, 1.25rem);
    padding-left: calc(44px + var(--space-3, 0.75rem) + var(--space-5, 1.25rem));
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-body, #4B535D);
    line-height: 1.65;
    border-top: 1px solid var(--color-border, #E5E2E0);
    padding-top: var(--space-4, 1rem);
    animation: expandFadeIn 300ms ease;
}
@keyframes expandFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* --- Highlighted card (e.g. "Poprawki bez limitu") --- */
.expand-card--highlight {
    border-color: rgba(255, 60, 0, 0.25);
    background: rgba(255, 60, 0, 0.02);
}
.expand-card--highlight .expand-card__icon {
    background: var(--color-primary, #FF3C00);
}
.expand-card--highlight .expand-card__plus {
    border-color: rgba(255, 60, 0, 0.3);
}
/* --- Footer strip --- */
.expand-footer {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: var(--space-6, 1.5rem);
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    background: var(--color-surface-alt, #F7F5F3);
    border-radius: var(--radius-lg, 16px);
}
.expand-footer__item {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 0.75rem);
}
.expand-footer__item svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.expand-footer__item strong {
    display: block;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-dark, #121C27);
    margin-bottom: 2px;
}
.expand-footer__item span {
    font-size: var(--text-xs, 0.8125rem);
    color: var(--color-text-muted, #7a8894);
    line-height: 1.5;
}
.expand-footer__divider {
    width: 1px;
    background: var(--color-border, #E5E2E0);
    margin: 0 var(--space-6, 1.5rem);
    flex-shrink: 0;
}
/* --- Responsive: expand grid --- */
@media (max-width: 1024px) {
    .expand-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .expand-grid {
        grid-template-columns: 1fr;
    }

    .expand-card__body {
        padding-left: var(--space-5, 1.25rem);
    }

    .expand-footer {
        flex-direction: column;
        gap: var(--space-4, 1rem);
    }

    .expand-footer__divider {
        width: 100%;
        height: 1px;
        margin: 0;
    }
}
/* =============================================
   Hover transitions - smooth and consistent
   ============================================= */
.expand-card,
.custom-card,
.review-card,
.purchase-box,
.portfolio__card {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.custom-card,
.review-card,
.portfolio__card {
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.process-flow__circle {
    transition: box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
                background 400ms cubic-bezier(0.4, 0, 0.2, 1),
                color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.process-flow__step {
    transition: none;
}
.portfolio__card {
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.portfolio__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(18, 28, 39, 0.1);
}
.purchase-box {
    transition: box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.review-card {
    transition: border-color 300ms ease,
                box-shadow 300ms ease;
}
.portfolio-marquee__track {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.faq-item--dark {
    transition: border-color 300ms ease;
}
.faq-item--dark[open] {
    transition: border-color 300ms ease, padding-left 300ms ease;
}
/* =============================================
   v6.9.12 - Container width: revert to 1292
   Rationale: 1440px was too wide for readability.
   Header stays wide (logo+menu flexbox). Content
   back to standard 1292px for comfortable reading.
   ============================================= */
/* No scope overrides - uses --container (1292) default */
/* =============================================
   v6.9.9 - /strony-internetowe/ COMPLETE REBUILD
   - Hero narrow, full-width subtitle, mail CTA
   - Trust cards (3 reklamowe boxy)
   - Package: pkg-hero featured tiles + tighter padding
   - Snake flow timeline (Ty/My/Razem)
   - Premium buy-box with buy + contact
   - Extras grid (Need more?)
   - Portfolio caption, smoother animations
   ============================================= */
/* ---------- HERO STRIP - equal 40/40 padding per request ---------- */
/* ---------- Section that also serves as hero - padding top (under sticky header) ---------- */
/* Light breadcrumbs - navy on white */
.breadcrumbs--light {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--space-4, 1rem);
    font-size: 0.8125rem;
    color: var(--color-text-muted, #7a8894);
}
.breadcrumbs--light a {
    color: var(--color-text-muted, #7a8894);
    text-decoration: none;
    transition: color 200ms ease;
}
.breadcrumbs--light a:hover {
    color: var(--color-primary, #FF3C00);
}
.breadcrumbs--light .breadcrumbs__sep {
    width: 14px;
    height: 1px;
    background: var(--color-border, #E5E2E0);
    display: inline-block;
}
.breadcrumbs--light .breadcrumbs__current {
    color: var(--color-dark, #121C27);
    font-weight: 500;
}
/* ---------- Section labels & titles - centered, no orange bar ---------- */
/* Remove decorative bar before label on light/alt sections */
/* Remove stray bottom border / pseudo elements under hero */
/* Subtle radial glow behind content */
.offer-strip--narrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 40px);
    margin: 0;
}
.offer-strip--narrow .offer-strip__content {
    flex: 1;
    min-width: 0;
    max-width: 680px;
}
/* Eyebrow - small tag above headline */
.offer-strip__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary, #FF3C00);
    background: rgba(255, 60, 0, 0.1);
    padding: 5px 11px;
    border-radius: 100px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 60, 0, 0.2);
}
.offer-strip__eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary, #FF3C00);
    box-shadow: 0 0 0 3px rgba(255, 60, 0, 0.2);
    animation: pulseDot 2s ease infinite;
    flex-shrink: 0;
}
.offer-strip--narrow .offer-strip__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
    font-weight: 400;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
    text-shadow: 0 0 60px rgba(255, 60, 0, 0.08);
}
.offer-strip--narrow .offer-strip__subtitle {
    max-width: 560px;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}
/* Actions: CTA button + inline price */
.offer-strip--narrow .offer-strip__actions {
    display: flex;
    align-items: center;
    gap: clamp(12px, 1.5vw, 20px);
    flex-shrink: 0;
}
/* Inline price link - elegant */
.offer-strip__price-link {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    text-decoration: none;
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    transition: background 250ms ease;
}
.offer-strip__price-link:hover {
    background: rgba(255, 255, 255, 0.04);
}
.offer-strip__price-value {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    line-height: 1;
}
.offer-strip__price-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    letter-spacing: 0.02em;
}
@media (max-width: 900px) {
    .offer-strip--narrow {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
    .offer-strip--narrow .offer-strip__content {
        max-width: 100%;
    }
    .offer-strip--narrow .offer-strip__actions {
        align-self: flex-start;
        flex-wrap: wrap;
    }
}
/* ---------- Hero entry animation (CSS, no JS) ---------- */
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ---------- TRUST CARDS - compact 3 reklamowe boxy ---------- */
.trust-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.trust-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: background 350ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 350ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.trust-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.08) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 350ms ease;
    pointer-events: none;
}
.trust-card:hover {
    border-color: rgba(255, 60, 0, 0.3);
    transform: translateY(-3px);
}
.trust-card:hover::before {
    opacity: 1;
}
.trust-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 300ms ease;
}
.trust-card__icon svg {
    width: 18px;
    height: 18px;
}
.trust-card:hover .trust-card__icon {
    transform: scale(1.05);
}
.trust-card__icon--orange {
    background: rgba(255, 60, 0, 0.12);
    color: var(--color-primary, #FF3C00);
    box-shadow: 0 0 0 1px rgba(255, 60, 0, 0.2) inset;
}
.trust-card__icon--blue {
    background: rgba(96, 165, 250, 0.12);
    color: #60A5FA;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2) inset;
}
.trust-card__icon--gold {
    background: rgba(251, 191, 36, 0.12);
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2) inset;
}
.trust-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.trust-card__big {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.01em;
}
.trust-card__label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
    margin-top: 2px;
    font-weight: 500;
}
@media (max-width: 800px) {
    .trust-cards {
        grid-template-columns: 1fr;
    }
}
/* ---------- SECTION TIGHT (smaller padding) ---------- */
.section--tight {
    padding-top: var(--space-10, 2.5rem);
    padding-bottom: var(--space-10, 2.5rem);
}
#pakiet {
    padding-top: var(--space-10, 2.5rem);
    padding-bottom: var(--space-10, 2.5rem);
}
/* Subtitle: comfortable reading width, centered, no mid-sentence breaks */
.section-subtitle--wide {
    max-width: 820px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
/* ---------- PACKAGE HERO TILES - 4 main benefits ---------- */
.pkg-hero {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4, 1rem);
    margin-top: var(--space-8, 2rem);
}
.pkg-hero__tile {
    position: relative;
    padding: var(--space-5, 1.25rem);
    background: #fff;
    border: 1.5px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-lg, 16px);
    display: flex;
    flex-direction: column;
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1), border-color 300ms ease, box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pkg-hero__tile:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 60, 0, 0.3);
    box-shadow: 0 12px 28px rgba(18, 28, 39, 0.08);
}
.pkg-hero__tile--accent {
    background: linear-gradient(135deg, #121C27 0%, #1d2935 100%);
    border-color: var(--color-primary, #FF3C00);
    color: #fff;
}
.pkg-hero__tile--accent .pkg-hero__title {
    color: #fff;
}
.pkg-hero__tile--accent .pkg-hero__desc {
    color: rgba(255, 255, 255, 0.8);
}
.pkg-hero__tile--accent .pkg-hero__desc strong {
    color: #fff;
}
.pkg-hero__tile--accent .pkg-hero__after {
    color: rgba(255, 255, 255, 0.55);
    border-top-color: rgba(255, 255, 255, 0.15);
}
.pkg-hero__num {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 0.875rem;
    color: var(--color-primary, #FF3C00);
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2, 0.5rem);
}
.pkg-hero__tile--accent .pkg-hero__num {
    color: var(--color-primary, #FF3C00);
}
.pkg-hero__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin: 0 0 var(--space-3, 0.75rem);
    line-height: 1.25;
}
.pkg-hero__desc {
    font-size: 0.875rem;
    color: var(--color-text-body, #4B535D);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}
.pkg-hero__desc strong {
    color: var(--color-dark, #121C27);
    font-weight: 600;
}
.pkg-hero__after {
    display: block;
    margin-top: var(--space-4, 1rem);
    padding-top: var(--space-3, 0.75rem);
    border-top: 1px solid var(--color-border, #E5E2E0);
    font-size: 0.75rem;
    color: var(--color-text-muted, #7a8894);
    font-weight: 500;
}
@media (max-width: 1024px) {
    .pkg-hero {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .pkg-hero {
        grid-template-columns: 1fr;
    }
}
/* Section heading inside package */
.pkg-section-heading {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-dark, #121C27);
    text-align: center;
    margin: var(--space-10, 2.5rem) 0 var(--space-6, 1.5rem);
    position: relative;
}
.pkg-section-heading::before,
.pkg-section-heading::after {
    content: '';
    display: inline-block;
    width: 40px;
    height: 1px;
    background: var(--color-border, #E5E2E0);
    vertical-align: middle;
    margin: 0 var(--space-3, 0.75rem);
}
/* ---------- Process - 4 kroki z chevronami (v6.9.45) ---------- */
/* Nadpisuje starszą .process z main.css która miała biały gradient */
.process {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 0;
    margin-top: clamp(32px, 4vw, 48px);
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
/* Strzałka między kartami - piękna, wyraźna, z glow */
.process__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    padding: 0 10px;
    color: var(--color-primary, #FF3C00);
    position: relative;
}
.process__arrow svg {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 8px rgba(255, 60, 0, 0.6));
    animation: processArrowPulse 2s ease-in-out infinite;
}
@keyframes processArrowPulse {
    0%, 100% { transform: translateX(0); opacity: 0.85; }
    50% { transform: translateX(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .process__arrow svg {
        animation: none;
    }
}
/* Single step card - eleganckie, premium */
.process__step {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 22px 22px;
    background: linear-gradient(165deg, #1A2533 0%, #141D2A 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: border-color 400ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
                background 400ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
}
/* Subtle corner glow in role color */
.process__step::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at top right, rgba(255, 60, 0, 0.12) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 400ms ease;
}
.process__step--my::after {
    background: radial-gradient(circle at top right, rgba(96, 165, 250, 0.12) 0%, transparent 70%);
}
.process__step--razem::after {
    background: radial-gradient(circle at top right, rgba(52, 211, 153, 0.12) 0%, transparent 70%);
}
.process__step:hover {
    background: linear-gradient(165deg, #1F2A3A 0%, #172033 100%);
    border-color: rgba(255, 60, 0, 0.45);
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 60, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.process__step--my:hover { border-color: rgba(96, 165, 250, 0.45); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(96, 165, 250, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.process__step--razem:hover { border-color: rgba(52, 211, 153, 0.45); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(52, 211, 153, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.process__step:hover::after { opacity: 1; }
/* Accent line on top of each card - gradient */
.process__step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary, #FF3C00) 20%, var(--color-primary, #FF3C00) 80%, transparent 100%);
    box-shadow: 0 0 12px var(--color-primary, #FF3C00);
}
.process__step--my::before { background: linear-gradient(90deg, transparent 0%, #60A5FA 20%, #60A5FA 80%, transparent 100%); box-shadow: 0 0 12px #60A5FA; }
.process__step--razem::before { background: linear-gradient(90deg, transparent 0%, #34D399 20%, #34D399 80%, transparent 100%); box-shadow: 0 0 12px #34D399; }
/* (stary ::after chevron usunięty - konflikt z corner glow; arrow teraz jako osobny .process__arrow) */
/* Numer - serif, wyrazisty, ale mniejszy */
.process__num {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    color: var(--color-primary, #FF3C00);
    margin-bottom: 14px;
    letter-spacing: -0.02em;
}
.process__step--my .process__num { color: #60A5FA; }
.process__step--razem .process__num { color: #34D399; }
.process__icon {
    display: none;
}
.process__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.125rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.process__text {
    font-size: 0.875rem;
    color: #D1D7DE;
    line-height: 1.62;
    margin: 0 0 18px;
    flex: 1;
    text-align: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
}
.process__text strong {
    color: #fff;
    font-weight: 600;
}
/* Role badge na dole karty - z animowaną kropką-pulsem */
.process__who {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 7px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 12px 5px 10px;
    border-radius: 100px;
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.18) 0%, rgba(255, 60, 0, 0.08) 100%);
    color: var(--color-primary, #FF3C00);
    line-height: 1.2;
    border: 1px solid rgba(255, 60, 0, 0.35);
    box-shadow: 0 2px 8px rgba(255, 60, 0, 0.15);
    position: relative;
    z-index: 2;
}
.process__who-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px rgba(255, 60, 0, 0.2);
    animation: processWhoDot 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes processWhoDot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 60, 0, 0.15); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 60, 0, 0.35); }
}
.process__step--my .process__who {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.18) 0%, rgba(96, 165, 250, 0.08) 100%);
    color: #60A5FA;
    border-color: rgba(96, 165, 250, 0.35);
    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.15);
}
.process__step--my .process__who-dot {
    animation: processWhoDotBlue 1.8s ease-in-out infinite;
}
@keyframes processWhoDotBlue {
    0%, 100% { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15); }
    50%      { box-shadow: 0 0 0 5px rgba(96, 165, 250, 0.35); }
}
.process__step--razem .process__who {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.18) 0%, rgba(52, 211, 153, 0.08) 100%);
    color: #34D399;
    border-color: rgba(52, 211, 153, 0.35);
    box-shadow: 0 2px 8px rgba(52, 211, 153, 0.15);
}
.process__step--razem .process__who-dot {
    animation: processWhoDotGreen 1.8s ease-in-out infinite;
}
@keyframes processWhoDotGreen {
    0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15); }
    50%      { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
    .process__who-dot {
        animation: none;
    }
}
/* =============================================
   v6.9.51 - Buy-box 2-columns (info + price) + extras strip
   ============================================= */
/* Lepsze bullet style w liście */
/* Delikatne "nie jesteś pewny?" CTA pod cena/zamów */
.buy-box__doubt {
    margin-top: var(--space-5, 1.25rem);
    padding-top: var(--space-4, 1rem);
    border-top: 1px dashed var(--color-border, #E5E2E0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
.buy-box__doubt-text {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #7a8894);
    line-height: 1.45;
    margin: 0;
    font-style: italic;
}
.buy-box__doubt-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 100px;
    background: transparent;
    border: 1.5px solid var(--color-border, #E5E2E0);
    color: var(--color-dark, #121C27);
    cursor: pointer;
    transition: border-color 250ms ease, color 250ms ease, background 250ms ease;
    font-family: inherit;
}
.buy-box__doubt-btn:hover {
    border-color: var(--color-primary, #FF3C00);
    color: var(--color-primary, #FF3C00);
    background: rgba(255, 60, 0, 0.03);
}
.buy-box__doubt-btn svg {
    flex-shrink: 0;
}
/* Extras strip - dołączony pod buy-box (w tej samej ramce) */
.buy-box__extras {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 32px);
    padding: clamp(22px, 2.5vw, 30px) clamp(28px, 3.5vw, 44px);
    background: linear-gradient(135deg, #121C27 0%, #1d2935 100%);
    color: #fff;
    border-top: 1px solid rgba(255, 60, 0, 0.3);
    flex-wrap: wrap;
}
.buy-box__extras-content {
    flex: 1;
    min-width: 260px;
}
.buy-box__extras-title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    font-weight: 400;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.buy-box__extras-text {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
    margin: 0;
    max-width: 620px;
}
.buy-box__extras-btn {
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .buy-box__extras {
        padding: 22px 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    .buy-box__extras-btn {
        width: 100%;
        justify-content: center;
    }
}
/* =============================================
   v6.9.53 - Opinions marquee (karuzela), FAQ polish
   ============================================= */
/* Opinions section - kompaktowa */
/* Google badge jako link */
.google-badge--link {
    text-decoration: none;
    color: inherit;
    transition: border-color 250ms ease, transform 250ms ease;
}
.google-badge--link:hover {
    border-color: rgba(255, 60, 0, 0.3);
    transform: translateY(-2px);
}
/* Marquee karuzela - opinie */
.opinions-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 8px 0;
    mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.opinions-marquee__track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: opinionsMarquee 60s linear infinite;
    will-change: transform;
}
.opinions-marquee:hover .opinions-marquee__track {
    animation-play-state: paused;
}
@keyframes opinionsMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .opinions-marquee__track {
        animation: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .opinion-card {
        scroll-snap-align: start;
    }
}
/* Single opinion card - kompaktowa */
.opinion-card {
    flex-shrink: 0;
    width: 320px;
    min-height: 200px;
    padding: 20px 22px;
    margin: 0;
    background: #fff;
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 12px rgba(18, 28, 39, 0.04);
    transition: border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}
.opinion-card:hover {
    border-color: rgba(255, 60, 0, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(18, 28, 39, 0.08);
}
.opinion-card__stars {
    display: flex;
    gap: 2px;
}
.opinion-card__text {
    font-size: 0.875rem;
    color: var(--color-text-body, #4B535D);
    line-height: 1.55;
    margin: 0;
    flex: 1;
    quotes: '„' '"';
    font-style: italic;
}
.opinion-card__text::before { content: open-quote; }
.opinion-card__text::after { content: close-quote; }
.opinion-card__author {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border, #E5E2E0);
}
.opinion-card__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary, #FF3C00), #ff6640);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1rem;
    flex-shrink: 0;
}
.opinion-card__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.opinion-card__name {
    font-size: 0.8125rem;
    color: var(--color-dark, #121C27);
    font-weight: 600;
}
.opinion-card__source {
    font-size: 0.6875rem;
    color: var(--color-text-muted, #7a8894);
    letter-spacing: 0.02em;
}
/* CTA under marquee */
.opinions-cta {
    display: flex;
    justify-content: center;
    margin-top: clamp(32px, 4vw, 48px);
}
.opinions-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 100px;
    background: #fff;
    border: 1.5px solid var(--color-border, #E5E2E0);
    color: var(--color-dark, #121C27);
    text-decoration: none;
    transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}
.opinions-cta__btn:hover {
    border-color: rgba(255, 60, 0, 0.3);
    box-shadow: 0 8px 20px rgba(18, 28, 39, 0.08);
    transform: translateY(-2px);
}
.opinions-cta__btn svg {
    flex-shrink: 0;
}
/* =============================================
   v6.9.54 - FAQ - completely new design
   Ciemne tło, numery serif, glass cards, płynne animacje
   ============================================= */
/* Subtle decorative background pattern */
/* Container narrow helper */
/* FAQ list */
.faq-list {
    list-style: none;
    padding: 0;
    margin: clamp(36px, 4.5vw, 56px) 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: faq;
}
.faq-entry {
    position: relative;
}
.faq-entry__details {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 350ms cubic-bezier(0.4, 0, 0.2, 1),
                background 350ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-entry__details:hover {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.02) 100%);
    border-color: rgba(255, 60, 0, 0.2);
}
.faq-entry__details[open] {
    background: linear-gradient(165deg, rgba(255, 60, 0, 0.08) 0%, rgba(255, 60, 0, 0.02) 100%);
    border-color: rgba(255, 60, 0, 0.35);
    box-shadow: 0 8px 32px rgba(255, 60, 0, 0.08), 0 0 0 1px rgba(255, 60, 0, 0.15);
}
/* Summary - clickable header */
.faq-entry__summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    cursor: pointer;
    list-style: none;
    transition: color 250ms ease;
}
.faq-entry__summary::-webkit-details-marker {
    display: none;
}
.faq-entry__summary::marker {
    display: none;
    content: '';
}
/* Big serif number */
.faq-entry__num {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.625rem;
    font-weight: 400;
    color: rgba(255, 60, 0, 0.45);
    line-height: 1;
    letter-spacing: 0.02em;
    min-width: 36px;
    transition: color 300ms ease, transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-entry__details:hover .faq-entry__num {
    color: rgba(255, 60, 0, 0.7);
}
.faq-entry__details[open] .faq-entry__num {
    color: var(--color-primary, #FF3C00);
    transform: scale(1.1);
}
/* Question text */
.faq-entry__question {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-align: left;
}
/* Toggle chevron in circle */
.faq-entry__toggle {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 60, 0, 0.12);
    border: 1px solid rgba(255, 60, 0, 0.25);
    color: var(--color-primary, #FF3C00);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
                background 300ms ease,
                border-color 300ms ease;
}
.faq-entry__details:hover .faq-entry__toggle {
    background: rgba(255, 60, 0, 0.2);
    border-color: rgba(255, 60, 0, 0.45);
}
.faq-entry__details[open] .faq-entry__toggle {
    transform: rotate(180deg);
    background: var(--color-primary, #FF3C00);
    border-color: var(--color-primary, #FF3C00);
    color: #fff;
}
.faq-entry__toggle svg {
    flex-shrink: 0;
}
/* Expanded body */
.faq-entry__body {
    padding: 0 24px 22px calc(24px + 36px + 20px); /* aligned with question */
    animation: faqEntryOpen 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-entry__body p {
    margin: 0;
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    text-wrap: pretty;
}
.faq-entry__body strong {
    color: #fff;
    font-weight: 600;
}
@keyframes faqEntryOpen {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* FAQ footer */
.faq-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: clamp(32px, 4vw, 48px);
    padding: 24px 28px;
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.08) 0%, rgba(255, 60, 0, 0.02) 100%);
    border: 1px solid rgba(255, 60, 0, 0.2);
    border-radius: 16px;
    flex-wrap: wrap;
}
.faq-footer__text {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.faq-footer__text strong {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}
.faq-footer__text span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.875rem;
}
.faq-footer__btn {
    flex-shrink: 0;
}
/* Mobile */
@media (max-width: 640px) {
    .faq-entry__summary {
        padding: 16px 18px;
        gap: 14px;
    }
    .faq-entry__num {
        font-size: 1.375rem;
        min-width: 30px;
    }
    .faq-entry__question {
        font-size: 0.9375rem;
    }
    .faq-entry__toggle {
        width: 30px;
        height: 30px;
    }
    .faq-entry__body {
        padding: 0 18px 18px 62px;
    }
    .faq-footer {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    .faq-footer__btn {
        width: 100%;
        justify-content: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    .faq-entry__body { animation: none; }
    .faq-entry__num { transition: none; }
    .faq-entry__toggle { transition: none; }
}
/* =============================================
   v6.9.55 - CTA HUB (4 karty info) + FAQ modal
   ============================================= */
.cta-hub {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 1100px;
    margin: 0 auto;
}
.cta-hub__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    font-family: inherit;
    transition: border-color 300ms ease, transform 300ms ease, background 300ms ease, box-shadow 300ms ease;
    position: relative;
    overflow: hidden;
}
.cta-hub__card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at right top, rgba(255, 60, 0, 0.1) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}
.cta-hub__card:hover {
    border-color: rgba(255, 60, 0, 0.4);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 60, 0, 0.2);
}
.cta-hub__card:hover::before {
    opacity: 1;
}
.cta-hub__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 60, 0, 0.12);
    color: var(--color-primary, #FF3C00);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: transform 300ms ease, background 300ms ease;
}
.cta-hub__card:hover .cta-hub__icon {
    background: rgba(255, 60, 0, 0.2);
    transform: scale(1.05);
}
.cta-hub__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    z-index: 1;
}
.cta-hub__text strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
}
.cta-hub__text span {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.35;
}
.cta-hub__arrow {
    flex-shrink: 0;
    font-size: 1.125rem;
    color: rgba(255, 60, 0, 0.6);
    transition: transform 300ms ease, color 300ms ease;
    position: relative;
    z-index: 1;
}
.cta-hub__card:hover .cta-hub__arrow {
    color: var(--color-primary, #FF3C00);
    transform: translateX(4px);
}
/* Responsive */
@media (max-width: 1024px) {
    .cta-hub {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .cta-hub {
        grid-template-columns: 1fr;
    }
    .cta-hub__card {
        padding: 16px;
    }
}
/* FAQ MODAL - większy popup na mobile */
.popup--faq {
    max-width: 820px;
}
.popup--faq .popup__body {
    padding: clamp(16px, 2vw, 24px);
}
.faq-list--modal {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.faq-list--modal .faq-entry__details {
    background: var(--color-surface-alt, #F7F5F3);
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: 12px;
}
.faq-list--modal .faq-entry__details:hover {
    background: #fff;
    border-color: rgba(255, 60, 0, 0.25);
}
.faq-list--modal .faq-entry__details[open] {
    background: rgba(255, 60, 0, 0.04);
    border-color: rgba(255, 60, 0, 0.35);
    box-shadow: 0 6px 20px rgba(255, 60, 0, 0.08);
}
.faq-list--modal .faq-entry__summary {
    padding: 16px 18px;
    gap: 14px;
}
.faq-list--modal .faq-entry__num {
    color: rgba(255, 60, 0, 0.5);
    font-size: 1.375rem;
    min-width: 32px;
}
.faq-list--modal .faq-entry__details:hover .faq-entry__num {
    color: rgba(255, 60, 0, 0.75);
}
.faq-list--modal .faq-entry__details[open] .faq-entry__num {
    color: var(--color-primary, #FF3C00);
}
.faq-list--modal .faq-entry__question {
    color: var(--color-dark, #121C27);
    font-size: 0.9375rem;
}
.faq-list--modal .faq-entry__toggle {
    width: 28px;
    height: 28px;
    background: rgba(255, 60, 0, 0.1);
    border-color: rgba(255, 60, 0, 0.2);
}
.faq-list--modal .faq-entry__body {
    padding: 0 18px 18px 64px;
}
.faq-list--modal .faq-entry__body p {
    color: var(--color-text-body, #4B535D);
    font-size: 0.875rem;
}
.faq-list--modal .faq-entry__body strong {
    color: var(--color-dark, #121C27);
}
.faq-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 20px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.06) 0%, rgba(255, 60, 0, 0.02) 100%);
    border: 1px solid rgba(255, 60, 0, 0.2);
    border-radius: 12px;
    flex-wrap: wrap;
}
.faq-modal-footer__text {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-body, #4B535D);
    flex: 1;
    min-width: 180px;
}
.process__step--final {
    /* no special bg - keep consistent */
}
/* Tablet: 2 kolumny (kroki) + strzałki tylko gdy w rzędzie */
@media (max-width: 960px) {
    .process {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .process__arrow {
        display: none;
    }
}
/* Mobile: 1 kolumna, strzałki obrócone w dół */
@media (max-width: 640px) {
    .process {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .process__arrow {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 0;
    }
    .process__arrow svg {
        transform: rotate(90deg);
    }
    .process__num {
        margin-bottom: 14px;
    }
    .process__title {
        font-size: 1.25rem;
    }
    .process__text {
        font-size: 0.875rem;
    }
}
.timeline {
    list-style: none;
    padding: 40px 0;
    margin: clamp(32px, 4vw, 48px) 0 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(12px, 1.5vw, 20px);
    position: relative;
    counter-reset: timeline;
    align-items: center;
}
/* Horizontal connecting line THROUGH the middle (where numbers sit) */
.timeline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(255, 60, 0, 0.25) 0%,
        rgba(255, 60, 0, 0.5) 30%,
        rgba(255, 60, 0, 0.5) 70%,
        rgba(255, 60, 0, 0.25) 100%);
    z-index: 0;
    transform: translateY(-1px);
}
/* Zigzag: odd steps go above the line, even go below */
.timeline__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 4px;
    opacity: 1; /* always visible; no JS hide */
}
.timeline__step:nth-child(odd) {
    align-self: start;
    padding-bottom: 0;
}
.timeline__step:nth-child(even) {
    align-self: end;
    flex-direction: column-reverse;
}
.timeline__step:nth-child(even) .timeline__who {
    margin-bottom: 10px;
    margin-top: 0;
}
.timeline__num {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--color-dark, #121C27);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.0625rem;
    font-weight: 400;
    color: #fff;
    line-height: 1;
    margin-bottom: 14px;
    border: 2px solid rgba(255, 60, 0, 0.4);
    box-shadow: 0 0 0 8px rgba(18, 28, 39, 1);
    transition: transform 300ms ease, border-color 300ms ease;
    position: relative;
    z-index: 2;
}
.timeline__step:nth-child(even) .timeline__num {
    margin-top: 14px;
    margin-bottom: 0;
    order: 2;
}
.timeline__step:nth-child(even) .timeline__title {
    order: 0;
}
.timeline__step:nth-child(even) .timeline__text {
    order: 1;
}
.timeline__step:hover .timeline__num {
    transform: scale(1.08);
}
.timeline__step--ty .timeline__num {
    border-color: var(--color-primary, #FF3C00);
    color: var(--color-primary, #FF3C00);
}
.timeline__step--my .timeline__num {
    border-color: #60A5FA;
    color: #60A5FA;
}
.timeline__step--razem .timeline__num {
    border-color: #34D399;
    color: #34D399;
}
.timeline__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.timeline__text {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.45;
    margin: 0 0 10px;
    text-wrap: pretty;
}
.timeline__who {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 8px;
    border-radius: 100px;
    line-height: 1.2;
}
.timeline__step--ty .timeline__who {
    background: rgba(255, 60, 0, 0.15);
    color: var(--color-primary, #FF3C00);
}
.timeline__step--my .timeline__who {
    background: rgba(96, 165, 250, 0.15);
    color: #60A5FA;
}
.timeline__step--razem .timeline__who {
    background: rgba(52, 211, 153, 0.15);
    color: #34D399;
}
/* Tablet: zigzag off, pionowa lista z naprzemiennym offsetem */
@media (max-width: 960px) {
    .timeline {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    .timeline::before {
        left: 25px;
        right: auto;
        top: 10px;
        bottom: 10px;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, rgba(255, 60, 0, 0.25) 0%, rgba(255, 60, 0, 0.5) 50%, rgba(255, 60, 0, 0.25) 100%);
        transform: none;
    }
    .timeline__step,
    .timeline__step:nth-child(odd),
    .timeline__step:nth-child(even) {
        flex-direction: row;
        align-items: flex-start;
        align-self: stretch;
        text-align: left;
        gap: 14px;
        padding: 0;
    }
    .timeline__num,
    .timeline__step:nth-child(even) .timeline__num {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        font-size: 1rem;
        margin: 0;
        order: 0;
        box-shadow: 0 0 0 6px rgba(18, 28, 39, 1);
    }
    .timeline__step:nth-child(even) .timeline__title,
    .timeline__step:nth-child(even) .timeline__text,
    .timeline__step:nth-child(even) .timeline__who {
        order: initial;
        margin: 0 0 4px 0;
    }
    .timeline__title {
        margin-bottom: 4px;
    }
    .timeline__text {
        margin-bottom: 6px;
    }
}
/* ---------- SNAKE FLOW (process timeline) ---------- */
.snake-flow {
    position: relative;
    margin: var(--space-12, 3rem) auto 0;
    max-width: 980px;
    padding: var(--space-4, 1rem) 0;
}
/* Vertical snake line connecting steps */
.snake-flow::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 60px;
    bottom: 60px;
    width: 2px;
    background: linear-gradient(to bottom,
        rgba(255, 60, 0, 0.2) 0%,
        rgba(255, 60, 0, 0.4) 50%,
        rgba(255, 60, 0, 0.2) 100%);
    transform: translateX(-50%);
    z-index: 0;
}
.snake-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-6, 1.5rem);
    margin-bottom: var(--space-8, 2rem);
    z-index: 1;
}
.snake-step:last-child { margin-bottom: 0; }
/* Zigzag - alternating sides, with gap from center line */
.snake-step:nth-child(odd) {
    flex-direction: row;
    padding-right: calc(50% + 44px);
}
.snake-step:nth-child(even) {
    flex-direction: row-reverse;
    padding-left: calc(50% + 44px);
}
/* Big circular number */
.snake-step__num {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-dark, #121C27);
    border: 2px solid var(--color-primary, #FF3C00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.125rem;
    color: var(--color-primary, #FF3C00);
    font-weight: 400;
    flex-shrink: 0;
    z-index: 2;
    box-shadow: 0 0 0 8px rgba(18, 28, 39, 1);
}
/* Card */
.snake-step__card {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    transition: background 300ms ease, border-color 300ms ease, transform 300ms ease;
}
.snake-step__card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 60, 0, 0.3);
    transform: translateY(-2px);
}
/* Color accents per role */
.snake-step--ty .snake-step__num { border-color: var(--color-primary, #FF3C00); color: var(--color-primary, #FF3C00); }
.snake-step--my .snake-step__num { border-color: #60A5FA; color: #60A5FA; }
.snake-step--razem .snake-step__num { border-color: #34D399; color: #34D399; }
.snake-step__who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: var(--space-3, 0.75rem);
}
.snake-step__who--ty { background: rgba(255, 60, 0, 0.15); color: var(--color-primary, #FF3C00); }
.snake-step__who--my { background: rgba(96, 165, 250, 0.15); color: #60A5FA; }
.snake-step__who--razem { background: rgba(52, 211, 153, 0.15); color: #34D399; }
.snake-step__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 var(--space-2, 0.5rem);
    line-height: 1.2;
}
.snake-step__text {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.55;
    margin: 0 0 var(--space-3, 0.75rem);
}
.snake-step__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    background: rgba(0, 0, 0, 0.25);
    padding: 4px 10px;
    border-radius: 20px;
}
.snake-step__badge svg { color: var(--color-primary, #FF3C00); }
/* Legend */
.snake-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6, 1.5rem);
    margin-top: var(--space-8, 2rem);
    padding-top: var(--space-6, 1.5rem);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-wrap: wrap;
}
.snake-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}
.snake-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.snake-legend__dot--ty { background: var(--color-primary, #FF3C00); }
.snake-legend__dot--my { background: #60A5FA; }
.snake-legend__dot--razem { background: #34D399; }
/* Snake mobile: collapse to vertical single column */
@media (max-width: 800px) {
    .snake-flow::before {
        left: 28px;
    }

    .snake-step,
    .snake-step:nth-child(odd),
    .snake-step:nth-child(even) {
        flex-direction: row;
        padding: 0 0 0 70px;
    }

    .snake-step__num {
        left: 28px;
        top: 32px;
        transform: translate(-50%, 0);
        width: 44px;
        height: 44px;
        font-size: 0.9375rem;
        box-shadow: 0 0 0 6px rgba(18, 28, 39, 1);
    }
}
/* ---------- PORTFOLIO MARQUEE - caption ---------- */
.portfolio-marquee__caption {
    text-align: center;
    margin-bottom: var(--space-4, 1rem);
}
.portfolio-marquee__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}
.portfolio-marquee__label svg {
    color: var(--color-primary, #FF3C00);
    animation: pulseDot 2s ease infinite;
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}
/* ---------- BUY BOX - premium purchase ---------- */
.buy-box {
    background: #fff;
    border: 2px solid var(--color-primary, #FF3C00);
    border-radius: var(--radius-xl, 24px);
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(255, 60, 0, 0.08), 0 8px 20px rgba(18, 28, 39, 0.04);
    margin-top: var(--space-4, 1rem);
}
.buy-box__ribbon {
    background: linear-gradient(90deg, var(--color-primary, #FF3C00) 0%, #ff5722 100%);
    color: #fff;
    padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.buy-box__ribbon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: pulseDot 2s ease infinite;
    flex-shrink: 0;
}
.buy-box__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
}
.buy-box__info {
    padding: var(--space-8, 2rem);
    border-right: 1px solid var(--color-border, #E5E2E0);
}
.buy-box__label {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-primary, #FF3C00);
    font-weight: 700;
    margin-bottom: var(--space-3, 0.75rem);
}
.buy-box__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin: 0 0 var(--space-3, 0.75rem);
    line-height: 1.2;
}
.buy-box__lead {
    font-size: 0.9375rem;
    color: var(--color-text-body, #4B535D);
    line-height: 1.65;
    margin: 0 0 var(--space-5, 1.25rem);
    max-width: 56ch;          /* zapobiega zbyt długim liniom */
    text-wrap: pretty;        /* lepsze wyrównanie linii */
}
.buy-box__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-5, 1.25rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2, 0.5rem);
}
.buy-box__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
    color: var(--color-text-body, #4B535D);
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.buy-box__list li svg {
    flex-shrink: 0;
    margin-top: 4px;
}
.buy-box__list li span {
    flex: 1 1 auto;
    min-width: 0;
}

/* Bardzo wąskie ekrany (Redmi Note 9C, Messenger in-app browser z ramkami).
   Mniej padding na buy-box żeby tekst się mieścił. */
@media (max-width: 380px) {
    .buy-box {
        margin-left: -8px;
        margin-right: -8px;
    }
    .buy-box__main,
    .buy-box__cta-side {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .buy-box__list li {
        font-size: 0.875rem;
        gap: 8px;
    }
    .buy-box__title {
        font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
        word-break: break-word;
    }
}
.buy-box__after-box {
    display: flex;
    gap: var(--space-3, 0.75rem);
    padding: var(--space-4, 1rem);
    background: var(--color-surface-alt, #F7F5F3);
    border-radius: var(--radius-md, 12px);
    border-left: 3px solid var(--color-primary, #FF3C00);
}
.buy-box__after-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 60, 0, 0.1);
    color: var(--color-primary, #FF3C00);
    display: flex;
    align-items: center;
    justify-content: center;
}
.buy-box__after-box strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-dark, #121C27);
    margin-bottom: 3px;
}
.buy-box__after-box span {
    font-size: 0.8125rem;
    color: var(--color-text-body, #4B535D);
    line-height: 1.5;
}
/* RIGHT - price column */
.buy-box__price {
    padding: var(--space-8, 2rem);
    background: linear-gradient(180deg, var(--color-surface-alt, #F7F5F3) 0%, #fff 100%);
    display: flex;
    flex-direction: column;
}
.buy-box__price-badge {
    display: inline-block;
    align-self: center;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary, #FF3C00);
    font-weight: 700;
    background: rgba(255, 60, 0, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: var(--space-4, 1rem);
}
.buy-box__price-amount {
    text-align: center;
    margin-bottom: var(--space-2, 0.5rem);
}
.buy-box__amount {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 400;
    color: var(--color-dark, #121C27);
    line-height: 1;
    display: inline-block;
}
.buy-box__currency {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.9375rem;
    color: var(--color-text-muted, #7a8894);
    font-weight: 500;
    vertical-align: middle;
}
.buy-box__price-note {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #7a8894);
    margin: 0 0 var(--space-5, 1.25rem);
}
.buy-box__perks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--space-5, 1.25rem);
    padding: var(--space-4, 1rem) 0;
    border-top: 1px solid var(--color-border, #E5E2E0);
    border-bottom: 1px solid var(--color-border, #E5E2E0);
}
.buy-box__perk {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--color-text-body, #4B535D);
    font-weight: 500;
}
.buy-box__perk svg {
    color: var(--color-primary, #FF3C00);
    flex-shrink: 0;
}
.buy-box__cta {
    margin-bottom: var(--space-3, 0.75rem);
}
.buy-box__divider {
    text-align: center;
    margin: var(--space-2, 0.5rem) 0;
    position: relative;
}
.buy-box__divider::before,
.buy-box__divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 1px;
    background: var(--color-border, #E5E2E0);
}
.buy-box__divider::before { left: 0; }
.buy-box__divider::after { right: 0; }
.buy-box__divider span {
    font-size: 0.75rem;
    color: var(--color-text-muted, #7a8894);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    background: #fff;
    padding: 0 10px;
    position: relative;
}
.buy-box__contact {
    margin-bottom: var(--space-3, 0.75rem);
}
.buy-box__small {
    font-size: 0.75rem;
    color: var(--color-text-muted, #7a8894);
    text-align: center;
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 900px) {
    .buy-box__grid {
        grid-template-columns: 1fr;
    }

    .buy-box__info {
        border-right: none;
        border-bottom: 1px solid var(--color-border, #E5E2E0);
    }
}
/* ---------- EXTRAS GRID (Need more?) ---------- */
.extras-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5, 1.25rem);
    margin-top: var(--space-10, 2.5rem);
}
.extras-card {
    display: block;
    padding: var(--space-6, 1.5rem);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg, 16px);
    text-decoration: none;
    color: inherit;
    transition: background 350ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 350ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.extras-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.1) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.extras-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 60, 0, 0.4);
    transform: translateY(-3px);
}
.extras-card:hover::before {
    opacity: 1;
}
.extras-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 60, 0, 0.12);
    color: var(--color-primary, #FF3C00);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4, 1rem);
    transition: background 300ms ease, transform 300ms ease;
    position: relative;
    z-index: 1;
}
.extras-card:hover .extras-card__icon {
    background: var(--color-primary, #FF3C00);
    color: #fff;
    transform: scale(1.05);
}
.extras-card__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 var(--space-2, 0.5rem);
    position: relative;
    z-index: 1;
}
.extras-card__text {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.55;
    margin: 0 0 var(--space-4, 1rem);
    position: relative;
    z-index: 1;
}
.extras-card__price {
    display: inline-block;
    font-size: 0.8125rem;
    color: var(--color-primary, #FF3C00);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 60, 0, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    margin-right: var(--space-2, 0.5rem);
    position: relative;
    z-index: 1;
}
.extras-card__arrow {
    display: inline-block;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
    transition: transform 300ms ease, color 300ms ease;
    position: relative;
    z-index: 1;
}
.extras-card:hover .extras-card__arrow {
    color: var(--color-primary, #FF3C00);
    transform: translateX(4px);
}
@media (max-width: 800px) {
    .extras-grid {
        grid-template-columns: 1fr;
    }
}
/* Extras CTA */
.extras-cta {
    margin-top: var(--space-8, 2rem);
    text-align: center;
    padding: var(--space-6, 1.5rem);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg, 16px);
}
.extras-cta__text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    margin: 0 0 var(--space-4, 1rem);
}
.extras-cta__text strong {
    color: #fff;
}
/* ---------- FAQ - refinement ---------- */
.faq-item--dark {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: var(--space-3, 0.75rem);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    transition: background 300ms ease, border-color 300ms ease;
}
.faq-item--dark:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 60, 0, 0.2);
}
.faq-item--dark[open] {
    background: rgba(255, 60, 0, 0.04);
    border-color: rgba(255, 60, 0, 0.25);
}
/* ---------- ANIMATIONS - smoother, no jumps ---------- */
.expand-card,
.pkg-hero__tile,
.snake-step__card,
.extras-card,
.trust-card,
.buy-box,
.faq-item--dark {
    will-change: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Reduced motion - disable transforms */
@media (prefers-reduced-motion: reduce) {
    .pkg-hero__tile,
    .snake-step__card,
    .extras-card,
    .trust-card,
    .portfolio-marquee__label svg,
    .buy-box__ribbon-dot {
        animation: none !important;
        transition: none !important;
    }
}
/* =============================================
   v6.9.19 - Package section FINAL
   - 3 horizontal pillars (not 3-column "choose" table)
   - Clickable detail items (native details/summary)
   - 2 CTA buttons → informational popups
   ============================================= */
/* ---------- "Wszystko w jednym pakiecie" ribbon - v6.9.118 (spokojna) ---------- */
.pack-ribbon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: clamp(28px, 3vw, 40px) auto 0;
    padding: 11px 24px;
    background: rgba(255, 60, 0, 0.04);
    border: 1px solid rgba(255, 60, 0, 0.16);
    border-radius: 100px;
    width: fit-content;
}

.pack-ribbon__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body, 'GT Walsheim Pro', sans-serif);
    font-size: 13px;
    font-weight: 400;
    color: var(--color-dark, #121C27);
    line-height: 1.3;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Lewy pill - label z subtelną ikoną (orange icon, ciemny tekst) */
.pack-ribbon__pill--label svg {
    flex-shrink: 0;
    color: var(--color-primary, #FF3C00);
}

/* Prawy pill - cena + notka (oba lekkie) */
.pack-ribbon__pill--price {
    gap: 8px;
}
.pack-ribbon__price {
    font-weight: 500;       /* nie bold - tylko delikatnie wyróżnione */
    color: var(--color-dark, #121C27);
    letter-spacing: -0.005em;
}
.pack-ribbon__note {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--color-text-muted, #8A909A);
    letter-spacing: 0;
}
/* Subtle separator między ceną a notką (kropka) */
.pack-ribbon__pill--price .pack-ribbon__note::before {
    content: '·';
    margin-right: 8px;
    color: rgba(18, 28, 39, 0.25);
}

/* Separator główny */
.pack-ribbon__sep {
    flex-shrink: 0;
    width: 1px;
    height: 12px;
    background: rgba(18, 28, 39, 0.15);
}

@media (max-width: 720px) {
    .pack-ribbon {
        flex-direction: column;
        border-radius: 14px;
        padding: 12px 20px;
        gap: 6px;
        max-width: calc(100% - 32px);
    }
    .pack-ribbon__sep { display: none; }
    .pack-ribbon__pill,
    .pack-ribbon__pill--price {
        white-space: normal;
        text-align: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pack-ribbon__pill--price .pack-ribbon__note::before { display: none; }
    .pack-ribbon__note { display: block; width: 100%; margin-top: 2px; }
}
/* ---------- Bonuses strip - pod pillarami, 3 konkrety rozliczeniowe ---------- */
.pack-bonuses {
    list-style: none;
    padding: 0;
    margin: clamp(28px, 3vw, 40px) auto 0;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
}
.pack-bonuses li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: 100px;
    font-size: 0.8125rem;
    color: var(--color-text-body, #4B535D);
    font-weight: 500;
    transition: border-color 200ms ease, color 200ms ease;
}
.pack-bonuses li:hover {
    border-color: rgba(255, 60, 0, 0.3);
    color: var(--color-dark, #121C27);
}
.pack-bonuses li svg {
    color: var(--color-primary, #FF3C00);
    flex-shrink: 0;
}
@media (max-width: 640px) {
    .pack-bonuses {
        gap: 8px;
        justify-content: flex-start;
    }
    .pack-bonuses li {
        font-size: 0.75rem;
        padding: 6px 11px;
        white-space: normal;
    }
    .pack-bonuses li svg {
        width: 15px;
        height: 15px;
    }
}
/* ---------- Timeline - kiedy co się dzieje ---------- */
.pack-timeline {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 12px;
    margin: clamp(20px, 2.5vw, 32px) auto 0;
    max-width: 980px;
    padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 28px);
    background: linear-gradient(135deg, rgba(18, 28, 39, 0.02) 0%, rgba(18, 28, 39, 0.01) 100%);
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-lg, 16px);
}
.pack-timeline__step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.pack-timeline__num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 60, 0, 0.1);
    color: var(--color-primary, #FF3C00);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1;
    border: 1px solid rgba(255, 60, 0, 0.25);
}
.pack-timeline__step--accent .pack-timeline__num {
    background: var(--color-primary, #FF3C00);
    color: #fff;
    border-color: var(--color-primary, #FF3C00);
}
.pack-timeline__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}
.pack-timeline__content strong {
    font-size: 0.875rem;
    color: var(--color-dark, #121C27);
    font-weight: 600;
    line-height: 1.3;
}
.pack-timeline__content span {
    font-size: 0.75rem;
    color: var(--color-text-muted, #7a8894);
    line-height: 1.4;
}
.pack-timeline__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 60, 0, 0.4);
    flex-shrink: 0;
}
/* Tablet: arrows become vertical, switch to 1 column */
@media (max-width: 760px) {
    .pack-timeline {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .pack-timeline__arrow {
        transform: rotate(90deg);
        margin: 0 auto;
    }
}
/* ---------- 3 horizontal pillars ---------- */
.pillars {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 2.5vw, 32px);
    margin-top: clamp(32px, 4vw, 48px);
}
.pillar {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: clamp(20px, 3vw, 48px);
    padding: clamp(28px, 3.2vw, 40px) clamp(28px, 3.2vw, 44px);
    background: #fff;
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-xl, 20px);
    transition: border-color 300ms ease, box-shadow 300ms ease;
    position: relative;
    overflow: hidden;
}
/* Subtle accent gradient per pillar */
.pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-primary, #FF3C00);
    opacity: 0.5;
    transition: opacity 300ms ease;
}
.pillar--devices::before { background: #60A5FA; }
.pillar--clients::before { background: #60A5FA; }
.pillar--setup::before { background: #34D399; }
.pillar--control::before { background: #A78BFA; }
.pillar:hover {
    border-color: rgba(255, 60, 0, 0.2);
    box-shadow: 0 12px 28px rgba(18, 28, 39, 0.06);
}
.pillar:hover::before {
    opacity: 1;
}
/* Pillar side - icon + title + sub */
.pillar__side {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 4px;
}
/* Icon + badge row - icon on left, badge next to it */
.pillar__head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: var(--space-4, 1rem);
    flex-wrap: wrap;
}
.pillar__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.pillar:hover .pillar__icon {
    transform: scale(1.05) rotate(-2deg);
}
.pillar__icon--orange {
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.15) 0%, rgba(255, 60, 0, 0.08) 100%);
    color: var(--color-primary, #FF3C00);
    box-shadow: 0 4px 12px rgba(255, 60, 0, 0.1), inset 0 0 0 1px rgba(255, 60, 0, 0.2);
}
.pillar__icon--blue {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.18) 0%, rgba(96, 165, 250, 0.08) 100%);
    color: #3B82F6;
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.1), inset 0 0 0 1px rgba(96, 165, 250, 0.2);
}
.pillar__icon--green {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.18) 0%, rgba(52, 211, 153, 0.08) 100%);
    color: #10B981;
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.1), inset 0 0 0 1px rgba(52, 211, 153, 0.2);
}
.pillar__icon--navy {
    background: linear-gradient(135deg, rgba(18, 28, 39, 0.12) 0%, rgba(18, 28, 39, 0.06) 100%);
    color: var(--color-dark, #121C27);
}
.pillar__icon--purple {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(167, 139, 250, 0.08) 100%);
    color: #7C3AED;
    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.12), inset 0 0 0 1px rgba(167, 139, 250, 0.22);
}
/* Filar badge - "Filar 01 · Design" w ramce, kolor per pillar */
.pillar__badge {
    display: inline-flex;
    align-items: stretch;
    margin-bottom: 0;
    line-height: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border, #E5E2E0);
    background: #fff;
    font-family: var(--font-body, 'Inter', sans-serif);
}
.pillar__badge-label {
    padding: 7px 10px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.9);
    background: var(--color-dark, #121C27);
    display: inline-flex;
    align-items: center;
}
.pillar__badge-num {
    padding: 7px 10px;
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--color-dark, #121C27);
    border-left: 1px solid var(--color-border, #E5E2E0);
    border-right: 1px solid var(--color-border, #E5E2E0);
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.02em;
}
.pillar__badge-name {
    padding: 7px 12px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-dark, #121C27);
    display: inline-flex;
    align-items: center;
}
/* Color variants - accent on the num slot */
.pillar__badge--orange { border-color: rgba(255, 60, 0, 0.3); }
.pillar__badge--orange .pillar__badge-label { background: var(--color-primary, #FF3C00); }
.pillar__badge--orange .pillar__badge-num { color: var(--color-primary, #FF3C00); background: rgba(255, 60, 0, 0.05); border-color: rgba(255, 60, 0, 0.2); }
.pillar__badge--blue { border-color: rgba(59, 130, 246, 0.3); }
.pillar__badge--blue .pillar__badge-label { background: #3B82F6; }
.pillar__badge--blue .pillar__badge-num { color: #3B82F6; background: rgba(59, 130, 246, 0.05); border-color: rgba(59, 130, 246, 0.2); }
.pillar__badge--green { border-color: rgba(16, 185, 129, 0.3); }
.pillar__badge--green .pillar__badge-label { background: #10B981; }
.pillar__badge--green .pillar__badge-num { color: #10B981; background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.2); }
.pillar__badge--purple { border-color: rgba(124, 58, 237, 0.3); }
.pillar__badge--purple .pillar__badge-label { background: #7C3AED; }
.pillar__badge--purple .pillar__badge-num { color: #7C3AED; background: rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.2); }
.pillar__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-dark, #121C27);
    line-height: 1.2;
    margin: 0 0 10px;
    letter-spacing: -0.015em;
}
.pillar__sub {
    font-size: 0.9375rem;
    color: var(--color-text-body, #4B535D);
    line-height: 1.6;
    margin: 0 0 var(--space-4, 1rem);
    text-align: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
}
/* "Wszystko w pakiecie" stamp - small badge pod sub, identyczny każdemu pillar'owi */
.pillar__stamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.1) 0%, rgba(255, 60, 0, 0.04) 100%);
    border: 1px solid rgba(255, 60, 0, 0.25);
    color: var(--color-primary, #FF3C00);
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
    align-self: flex-start;
}
.pillar__stamp svg {
    flex-shrink: 0;
}
/* Pillar main - clickable detail items */
.pillar__main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pillar-item {
    border-radius: 10px;
    transition: background 200ms ease, border-color 200ms ease;
    border: 1px solid rgba(18, 28, 39, 0.08);
    background: #FAFAF9;
}
.pillar-item:hover {
    background: rgba(255, 60, 0, 0.05);
    border-color: rgba(255, 60, 0, 0.25);
}
.pillar-item[open] {
    background: rgba(255, 60, 0, 0.06);
    border-color: rgba(255, 60, 0, 0.3);
}
.pillar-item > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    font-size: 1rem;
    color: var(--color-dark, #121C27);
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    line-height: 1.4;
}
.pillar-item > summary::-webkit-details-marker {
    display: none;
}
.pillar-item > summary::marker {
    content: '';
    display: none;
}
.pillar-item > summary > svg:first-child {
    flex-shrink: 0;
}
.pillar-item > summary > span:not(.pillar-item__more):not(.pillar-item__qr) {
    flex: 1;
    min-width: 0;
}
.pillar-item > summary strong {
    color: var(--color-dark, #121C27);
    font-weight: 600;
}
/* "Nowość" mały badge - drobny druk obok tekstu */
.pillar-item__new {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary, #FF3C00);
    background: rgba(255, 60, 0, 0.1);
    border: 1px solid rgba(255, 60, 0, 0.25);
    border-radius: 100px;
    padding: 2px 7px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.2;
}
/* "Ważne" badge - odpowiednik Nowość, ale niebieski (info) */
.pillar-item__important {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 100px;
    padding: 2px 7px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.2;
}
.pillar-item__more {
    flex-shrink: 0;
    font-size: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 1;
    transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
    padding: 5px 10px;
    border: 1px solid rgba(255, 60, 0, 0.35);
    border-radius: 100px;
    color: var(--color-primary, #FF3C00);
    background: rgba(255, 60, 0, 0.08);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.pillar-item__more::before {
    content: 'rozwiń';
    font-size: 0.6875rem;
}
/* Chevron down arrow after text */
.pillar-item__more::after {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23FF3C00' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 250ms ease;
}
.pillar-item:hover .pillar-item__more {
    background: var(--color-primary, #FF3C00);
    color: #fff;
    border-color: var(--color-primary, #FF3C00);
}
.pillar-item:hover .pillar-item__more::after {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.pillar-item[open] .pillar-item__more {
    color: var(--color-text-muted, #7a8894);
    border-color: var(--color-border, #E5E2E0);
    background: transparent;
}
.pillar-item[open]:hover .pillar-item__more {
    color: var(--color-dark, #121C27);
    background: rgba(18, 28, 39, 0.05);
    border-color: rgba(18, 28, 39, 0.15);
}
.pillar-item[open] .pillar-item__more::before {
    content: 'zwiń';
}
.pillar-item[open] .pillar-item__more::after {
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%237a8894' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.pillar-item__body {
    padding: 6px 16px 16px 44px;
    font-size: 1rem;             /* +1px (15→16px) - mniej "dziur" w justowaniu */
    color: var(--color-text-body, #4B535D);
    line-height: 1.65;
    animation: pillarExpand 280ms ease;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
}
/* Section subtitle also gets nice wrapping on this page */
/* QR highlighted item - colorful QR code */
.pillar-item--highlight {
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.04) 0%, rgba(255, 60, 0, 0.02) 100%);
    border-color: rgba(255, 60, 0, 0.15);
}
.pillar-item--highlight:hover {
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.08) 0%, rgba(255, 60, 0, 0.04) 100%);
    border-color: rgba(255, 60, 0, 0.3);
}
.pillar-item--highlight[open] {
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.08) 0%, rgba(255, 60, 0, 0.04) 100%);
    border-color: rgba(255, 60, 0, 0.35);
}
.pillar-item__qr {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 4px;
    background: #fff;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(255, 60, 0, 0.15);
    border: 1px solid rgba(255, 60, 0, 0.2);
}
.pillar-item__qr svg {
    width: 100%;
    height: 100%;
}
/* When highlight item, body padding different (QR icon is 36px) */
.pillar-item--highlight .pillar-item__body {
    padding-left: 64px;
}
@keyframes pillarExpand {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* ========== MOBILE REFINEMENTS ========== */
/* Tablet: 2 pillars side-by-side? no - keep single column, but refine spacing */
@media (max-width: 960px) {
    .pillars {
        gap: 16px;
    }
    .pillar {
        grid-template-columns: 1fr;
        padding: 24px 20px;
        gap: 20px;
    }
    .pillar::before {
        width: 3px;
    }
    .pillar__side {
        padding-top: 0;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--color-border, #E5E2E0);
        margin-bottom: 4px;
    }
    .pillar__icon {
        width: 48px;
        height: 48px;
    }
    .pillar__icon svg {
        width: 24px;
        height: 24px;
    }
    .pillar__title {
        font-size: 1.375rem;
    }
    .pillar__sub {
        text-align: left; /* justify looks bad on narrow width */
        font-size: 0.9375rem;
    }
    .pillar__head {
        gap: 10px;
        margin-bottom: 12px;
    }
    .pillar__badge {
        font-size: 0.6875rem;
        padding: 4px 8px;
    }
}
/* Phone: tight, readable, clickable */
/* Mini-CTA "Zamów stronę" - pack-order block */
.pack-order {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: clamp(24px, 3vw, 36px) auto 0;
    text-align: center;
}
.pack-order__btn {
    min-width: 340px;
}
.pack-order__note {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #7a8894);
    margin: 0;
    max-width: 440px;
    line-height: 1.5;
}
@media (max-width: 560px) {
    .pack-order__btn {
        min-width: 0;
        width: 100%;
    }
}
/* Tiny phones: even more compact */
@media (max-width: 380px) {
    .pillar {
        padding: 16px 14px;
    }
    .pillar-item > summary {
        font-size: 0.8125rem;
        padding: 9px 8px 9px 10px;
    }
    .pillar-item__body {
        font-size: 0.8125rem;
        padding-left: 30px;
    }
    .pillar-item__more {
        padding: 3px 6px;
    }
}
/* ---------- Package CTAs - 2 info buttons ---------- */
.package-ctas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4, 1rem);
    margin-top: clamp(32px, 4vw, 48px);
}
.package-cta {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    background: linear-gradient(135deg, #121C27 0%, #1d2935 100%);
    border: 1px solid rgba(255, 60, 0, 0.2);
    border-radius: var(--radius-lg, 16px);
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}
.package-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at right, rgba(255, 60, 0, 0.1) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 300ms ease;
    pointer-events: none;
}
.package-cta:hover {
    border-color: rgba(255, 60, 0, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(18, 28, 39, 0.15);
}
.package-cta:hover::before {
    opacity: 1;
}
.package-cta__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 60, 0, 0.15);
    color: var(--color-primary, #FF3C00);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.package-cta__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}
.package-cta__text strong {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.0625rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 3px;
    letter-spacing: -0.01em;
}
.package-cta__text span {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.4;
}
.package-cta__arrow {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--color-primary, #FF3C00);
    font-weight: 400;
    transition: transform 300ms ease;
    position: relative;
    z-index: 1;
}
.package-cta:hover .package-cta__arrow {
    transform: translateX(4px);
}
@media (max-width: 800px) {
    .package-ctas {
        grid-template-columns: 1fr;
    }
}
/* ---------- Popup --info variant (hosting, pricing) ---------- */
.popup--info .popup__body {
    padding: var(--space-6, 1.5rem);
}
/* Info scenarios (hosting popup) */
.info-scenarios {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 1.25rem);
    margin-bottom: var(--space-6, 1.5rem);
}
.info-scenario {
    display: flex;
    gap: var(--space-4, 1rem);
    padding: var(--space-5, 1.25rem);
    background: var(--color-surface-alt, #F7F5F3);
    border-radius: var(--radius-lg, 16px);
    border-left: 3px solid var(--color-primary, #FF3C00);
}
.info-scenario__num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary, #FF3C00);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1rem;
    font-weight: 400;
}
.info-scenario__content h4 {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin: 0 0 6px;
    line-height: 1.25;
}
.info-scenario__content p {
    font-size: 0.9375rem;
    color: var(--color-text-body, #4B535D);
    line-height: 1.55;
    margin: 0;
}
/* Price table (pricing popup) */
.price-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    margin-bottom: var(--space-6, 1.5rem);
}
.price-table__row {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    padding: var(--space-5, 1.25rem);
    background: #fff;
    border-bottom: 1px solid var(--color-border, #E5E2E0);
}
.price-table__row:last-child {
    border-bottom: none;
}
.price-table__row--total {
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.04) 0%, rgba(255, 60, 0, 0.02) 100%);
    border-top: 2px solid var(--color-primary, #FF3C00);
}
.price-table__label {
    flex: 1;
    min-width: 0;
}
.price-table__label strong {
    display: block;
    font-size: 1rem;
    color: var(--color-dark, #121C27);
    font-weight: 600;
    margin-bottom: 4px;
}
.price-table__label span {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted, #7a8894);
    line-height: 1.4;
}
.price-table__value {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.price-table__num {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-dark, #121C27);
    line-height: 1;
    letter-spacing: -0.01em;
}
.price-table__num--accent {
    color: var(--color-primary, #FF3C00);
    font-size: 1.75rem;
}
.price-table__unit {
    font-size: 0.75rem;
    color: var(--color-text-muted, #7a8894);
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
/* Info notes (bullet points with check icons) */
.info-notes {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-6, 1.5rem);
}
.info-note {
    display: flex;
    gap: 10px;
    font-size: 0.9375rem;
    color: var(--color-text-body, #4B535D);
    line-height: 1.55;
}
.info-note svg {
    flex-shrink: 0;
    color: var(--color-primary, #FF3C00);
    margin-top: 1px;
}
.info-note strong {
    color: var(--color-dark, #121C27);
    font-weight: 600;
}
/* Info CTA footer */
.info-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
    padding-top: var(--space-5, 1.25rem);
    border-top: 1px solid var(--color-border, #E5E2E0);
    flex-wrap: wrap;
}
.info-cta__text {
    flex: 1;
    min-width: 200px;
    font-size: 0.9375rem;
    color: var(--color-text-body, #4B535D);
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 700px) {
    .price-table__row {
        flex-direction: column;
        align-items: flex-start;
    }
    .price-table__value {
        align-items: flex-start;
        text-align: left;
    }
    .info-scenario {
        flex-direction: column;
    }
}
/* =============================================
   v6.9.17 - Legacy price-points/packs/after-year
   (kept for backwards compat, hidden on pg-strony-internetowe)
   ============================================= */
/* ---------- 3 big price metrics ---------- */
.price-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4, 1rem);
    margin-top: clamp(32px, 4vw, 48px);
    margin-bottom: clamp(40px, 5vw, 64px);
}
.price-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-6, 1.5rem) var(--space-5, 1.25rem);
    background: #fff;
    border: 1.5px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-lg, 16px);
    transition: border-color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}
.price-point:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 60, 0, 0.25);
    box-shadow: 0 8px 24px rgba(18, 28, 39, 0.06);
}
.price-point--accent {
    background: linear-gradient(135deg, #121C27 0%, #1d2935 100%);
    border-color: var(--color-primary, #FF3C00);
    color: #fff;
}
.price-point--accent .price-point__num {
    color: #fff;
    text-shadow: 0 0 40px rgba(255, 60, 0, 0.15);
}
.price-point--accent .price-point__label {
    color: rgba(255, 255, 255, 0.75);
}
.price-point__num {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: clamp(1.75rem, 2.8vw, 2.375rem);
    font-weight: 400;
    color: var(--color-primary, #FF3C00);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.price-point__label {
    font-size: 0.875rem;
    color: var(--color-text-body, #4B535D);
    line-height: 1.4;
    font-weight: 500;
    max-width: 240px;
}
@media (max-width: 800px) {
    .price-points {
        grid-template-columns: 1fr;
    }
    .price-point__label {
        max-width: 100%;
    }
}
/* ---------- 3 thematic packs (columns) ---------- */
.packs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5, 1.25rem);
    align-items: stretch;
}
.pack {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-7, 1.75rem) var(--space-6, 1.5rem);
    background: #fff;
    border: 1.5px solid var(--color-border, #E5E2E0);
    border-radius: var(--radius-xl, 20px);
    transition: border-color 350ms ease, transform 350ms ease, box-shadow 350ms ease;
}
.pack:hover {
    border-color: rgba(255, 60, 0, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(18, 28, 39, 0.07);
}
/* Featured pack - highlighted middle column */
.pack--featured {
    background: linear-gradient(180deg, rgba(255, 60, 0, 0.03) 0%, #fff 30%);
    border-color: rgba(255, 60, 0, 0.4);
    border-width: 2px;
    box-shadow: 0 12px 28px rgba(255, 60, 0, 0.06);
}
.pack__ribbon {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary, #FF3C00);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(255, 60, 0, 0.3);
    white-space: nowrap;
}
/* Pack header */
.pack__head {
    text-align: center;
    padding-bottom: var(--space-5, 1.25rem);
    margin-bottom: var(--space-5, 1.25rem);
    border-bottom: 1px solid var(--color-border, #E5E2E0);
}
.pack__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3, 0.75rem);
    transition: transform 300ms ease;
}
.pack:hover .pack__icon {
    transform: scale(1.05);
}
.pack__icon--orange {
    background: rgba(255, 60, 0, 0.1);
    color: var(--color-primary, #FF3C00);
}
.pack__icon--blue {
    background: rgba(96, 165, 250, 0.1);
    color: #60A5FA;
}
.pack__icon--featured {
    background: var(--color-primary, #FF3C00);
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 60, 0, 0.25);
}
.pack__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--color-dark, #121C27);
    margin: 0 0 6px;
    line-height: 1.2;
}
.pack__sub {
    font-size: 0.875rem;
    color: var(--color-text-muted, #7a8894);
    margin: 0;
    line-height: 1.4;
}
/* Pack checklist - absolute icon, block text to prevent flex column split */
.pack__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
.pack__list li {
    position: relative;
    padding-left: 26px;
    font-size: 0.9375rem;
    color: var(--color-text-body, #4B535D);
    line-height: 1.55;
}
.pack__list li svg {
    position: absolute;
    left: 0;
    top: 5px;
    flex-shrink: 0;
}
.pack__list li strong {
    color: var(--color-dark, #121C27);
    font-weight: 600;
}
@media (max-width: 1024px) {
    .packs-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6, 1.5rem);
    }
    .pack--featured {
        order: -1;
    }
}
/* ---------- After 12 months box ---------- */
.after-year {
    display: flex;
    align-items: center;
    gap: var(--space-5, 1.25rem);
    margin-top: clamp(40px, 5vw, 64px);
    padding: var(--space-6, 1.5rem) var(--space-7, 1.75rem);
    background: linear-gradient(135deg, #121C27 0%, #1d2935 100%);
    border-radius: var(--radius-xl, 20px);
    border: 1px solid rgba(255, 60, 0, 0.2);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.after-year::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: radial-gradient(ellipse at right center, rgba(255, 60, 0, 0.1) 0%, transparent 60%);
    pointer-events: none;
}
.after-year__icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 60, 0, 0.15);
    color: var(--color-primary, #FF3C00);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.after-year__content {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.after-year__title {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.375rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.2;
}
.after-year__text {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.55;
    margin: 0;
}
.after-year__text strong {
    color: #fff;
    font-weight: 600;
}
.after-year__badge {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    background: rgba(255, 60, 0, 0.1);
    border: 1px solid rgba(255, 60, 0, 0.3);
    border-radius: var(--radius-lg, 16px);
    position: relative;
    z-index: 1;
}
.after-year__badge-num {
    font-family: var(--font-heading, 'DM Serif Display', serif);
    font-size: 1.625rem;
    font-weight: 400;
    color: var(--color-primary, #FF3C00);
    line-height: 1;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.after-year__badge-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
@media (max-width: 900px) {
    .after-year {
        flex-direction: column;
        text-align: center;
    }
}
/* ==========================================================================
   v6.9.82 - O nas / Opinie / Kontakt - jednolite komponenty
   Scope: body.pg-o-nas, body.pg-opinie, body.pg-kontakt
   Typografia: GT Walsheim Pro via var(--font-heading)
   ========================================================================== */
/* ============================================
   O NAS (body.pg-o-nas)
   ============================================ */
/* Hero mini */
/* Stats */
/* Values */
/* Location */
/* CTA bottom dark */
/* ============================================
   OPINIE (body.pg-opinie)
   ============================================ */
/* Themes - 5 kluczowych tematów */
/* Reviews grid */
/* CTA bottom */
/* ============================================
   KONTAKT (body.pg-kontakt)
   ============================================ */
/* Main grid - info + form */
/* Info box */
a.kt-info__value:hover { color: var(--color-primary, #FF3C00); }
/* Form */
/* Map section */
/* Invoice data */
/* ==========================================================================
   v6.9.83 - OPINIE v2: kompaktowy hero + większy grid + referencje papierowe
   ========================================================================== */
/* Hero compact */
/* Reviews grid - większy, 3 kolumny, bez duplikatów */
/* Papers - referencje papierowe */
/* CTA bottom - delikatniej */
/* Responsive */
/* Ukryj stare reguły op-themes, op-hero__score które już nie są używane */
/* v6.9.84 - O nas: W liczbach + Zasięg (zamiast Katowic) */
/* Zasięg */
/* ==========================================================================
   v6.9.85 - OPINIE v3: TOP 3 + karuzela prac + load more
   ========================================================================== */
/* Ukryj stare referencje papierowe */
/* Hero - zmiana lead (usunąłem w PHP, ale jeśli zostaje klasa .op-hero__lead) */
/* Hero title - szerszy na 2 linie */
/* TOP 3 opinie + realizacje */
/* Banner realizacji - hero na górze karty */
/* Tekst opinii - zwijany */
/* Stary __works (panel realizacji pod opinią) - zastąpiony banerem na górze, ukryty */
/* Grid opinii + CTA - stare style po usunięciu sekcji "Co jeszcze piszą" */
/* Ukryj stary cta-row z link do Google (teraz w actions) */
/* Karuzela prac */
/* v6.9.89 - Opinie: redesign TOP 2-col z banerem realizacji, krótkie opinie bez clamp, CTA strip */
/* Hero padding + wyrównanie - 1:1 jak na .mkt-hero (marketing-internetowy, aktywne wartości) */
/* Breadcrumbs - display: flex (własna linia) + margin dolny dopasowany (clamp 20-32px) */
/* Centrowanie flex kontenerów wewnątrz hero (badges, CTA) */
/* Mniejszy odstęp pod badge → hero płynnie schodzi do TOP opinii */
/* Krótka opinia (not is-long) - tekst rozlewa się naturalnie, żadnych obcinek */
/* CTA strip - po TOP opiniach, przed karuzelą */
/* v6.9.87 - Opinie: auto-scroll marquee + caption + usuń CTA */
/* Usunięcie starego CTA bottom */
/* Stary scroller - zastąpiony marquee */
/* Marquee - auto-scroll prawo→lewo */
@keyframes opMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* Karta w marquee */
/* Caption pod karuzelą */
/* Respect reduced motion */
/* Mobile: węższe karty */
/* ===================================================================== */
/* v6.9.90 - O nas: hero badges, stats icons, timeline, liczby icons,     */
/*           zasieg columns. Kontakt: hero badges, form icons, map        */
/*           overlay, socials, FAQ.                                        */
/* ===================================================================== */
/* ==================== O NAS ==================== */
/* Hero badges (Google 4.9 + Od 2011) */
/* Stats icon + hover */
/* Timeline */
@keyframes onMilestonePulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(255, 60, 0, 0.08); }
    50%      { box-shadow: 0 0 0 10px rgba(255, 60, 0, 0.20); }
}
/* W liczbach - ikony + hover */
/* Zasieg - 3 kolumny */
/* ==================== KONTAKT ==================== */
@keyframes ktDotPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15); }
    50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.28); }
}
/* Socials w info boxie */
/* Map overlay */
/* FAQ */
/* ===================================================================== */
/* v6.9.94 - Opinie: marquee dodatkowych opinii Google + ghost CTA       */
/* ===================================================================== */
/* Marquee track - płynie prawo→lewo, hover pauza */
@keyframes opRMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* Karta opinii w marquee */
/* Link do wszystkich opinii pod marquee */
/* Ghost CTA "Przejdź do oferty" w op-works */
/* ===================================================================== */
/* v6.9.98 - O nas v2: co robimy (4 karty), doświadczenie + referencje,   */
/*           zasięg międzynarodowy (3 kontynenty + fakty), uproszczone    */
/*           filary. Remove stare Stats/W liczbach/Timeline/Reach.        */
/* ===================================================================== */
/* Hero lead - lekko szerszy + wyśrodkowany */
/* Ukryj stare sekcje (Stats 3-card, Timeline, Numbers, Reach, Location, Values-old-first) */
/* ========== CO ROBIMY - ciemne tło, 4 karty + 2 panele dodatkowe ========== */
/* ========== Lista podusług w kartach (na ciemnym) ========== */
/* ========== 2 PANELE DODATKOWE (hosting + referencje UE) ========== */
/* ========== DOŚWIADCZENIE ========== */
/* ========== ZASIĘG MIĘDZYNARODOWY ========== */
/* Kraje jako chipy - proste, bez bombastycznych kart per kontynent */
/* ============================================================================ */
/* v6.9.100 - BREADCRUMBS FINAL GLOBAL RULE                                     */
/* Jedna reguła do końca projektu. Małe, dyskretne, stały odstęp od góry,       */
/* pod sticky navem, nad całą resztą hero. !important by ubić per-page overrides.*/
/* ============================================================================ */
.breadcrumbs,
.breadcrumbs--light,
body .breadcrumbs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 0 clamp(24px, 3vw, 36px) !important;
    padding: 0 !important;
    font-family: var(--font-body), system-ui, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    color: var(--color-text-muted, #7a8894) !important;
}
.breadcrumbs a,
.breadcrumbs--light a {
    color: var(--color-text-muted, #7a8894) !important;
    text-decoration: none !important;
    font-weight: 400 !important;
    transition: color 200ms ease !important;
}
.breadcrumbs a:hover,
.breadcrumbs--light a:hover {
    color: var(--color-primary, #FF3C00) !important;
}
/* Separator - subtelna linijka, nie slash */
.breadcrumbs__sep {
    display: inline-block !important;
    width: 14px !important;
    height: 1px !important;
    background: currentColor !important;
    opacity: 0.35 !important;
    margin: 0 4px !important;
    vertical-align: middle !important;
}
.breadcrumbs__sep::before,
.breadcrumbs__sep::after { content: none !important; }
/* Aktualny breadcrumb - trochę ciemniejszy, ale nadal delikatny */
.breadcrumbs__current {
    color: var(--color-dark, #121C27) !important;
    font-weight: 500 !important;
    opacity: 0.85 !important;
}
/* Na ciemnym tle - ikona kolor przestrzeniowo, z białą odmianą */
.section--dark .breadcrumbs,
.section--dark .breadcrumbs a,
.section--dark .breadcrumbs--light,
.section--dark .breadcrumbs--light a {
    color: rgba(255, 255, 255, 0.55) !important;
}
.section--dark .breadcrumbs__current {
    color: rgba(255, 255, 255, 0.95) !important;
}
/* ============================================================================ */
/* v6.9.101 - O nas v3: 4 Pillars section, rozbudowane on-do karty z listą,     */
/*   pogrupowane branże, closing online banner. Usuń starą "on-values" sekcję.   */
/* ============================================================================ */
/* Ukryj starą on-values sekcję (Bez tajemnic, w trzech krokach) */
/* ========== 4 FILARY (bez nagłówka - karty pod hero) ========== */
/* ========== CO ROBIMY - rozbudowana karta z listą ========== */
/* Usuwam stare on-do-card__tags jeśli jeszcze są */
/* ========== BRANŻE POGRUPOWANE ========== */
/* ========== ONLINE - obsługa zdalna, 3 fakty, jasne tło ========== */
/* Ukryj starą sekcję on-experience (Piętnaście lat w praktyce) i on-cta-bottom */
/* ============================================================================ */
/* v6.9.104 - KONTAKT v3: usunięta mapa, przerobione "Pełne dane firmy"          */
/*   na 2 karty (identyfikacja + przelew) z IBAN/SWIFT/NIP UE + click-to-copy.   */
/* ============================================================================ */
/* Usuń mapę - całkowicie ukryta */
/* Polish hero lead - wycentrowany */
/* Info box - dodaj __intro przed listą */
/* ============== INVOICE SECTION REDESIGN ============== */
/* Override starego .kt-invoice__grid (2-col) na nowy */
/* Karty - identyfikacja + dane przelewu */
/* Override stary kt-invoice__data - nowy "definition list" styl */
/* Click-to-copy elementy */
/* ============================================================================ */
/* v6.9.105 - KONTAKT v4: usunięte FAQ, kompaktowy panel danych firmy            */
/* ============================================================================ */
/* Usuń FAQ całkowicie */
/* COMPACT INVOICE - jeden mały panel zamiast 2 wielkich kart */
/* Click-to-copy w compact (dziedziczy z poprzedniego stylu, ale na jasnym tle) */
/* Toast skopiowane */
/* ============================================================================ */
/* v6.9.106 - KONTAKT v5: hero bez nagłówka (tylko breadcrumbs), brand orange   */
/* ============================================================================ */
/* Ukryj nagłówek hero (label/H1/lead/badges) - zostają tylko breadcrumbs */
/* Hero z samym breadcrumbsem - kompaktowy, krótki padding */
/* ============================================================================ */
/* v6.9.107 - C1: Audyt strony notice + modal (na /strony-internetowe/)         */
/* ============================================================================ */
/* Subtelny pasek-link */
/* MODAL */
@keyframes siAuditFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes siAuditUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }


/* ============================================================================ */
/* v6.9.116 - UNIFIED MODAL POLISH                                              */
/* Wszystkie modale używają tego samego wzorca .popup-overlay/.popup            */
/* Mobile UX, focus, scroll, smooth transitions                                  */
/* ============================================================================ */

/* Lock body scroll when popup open - bez skoku layoutu */
html.popup-open {
    overflow: hidden !important;
    /* scrollbar-gutter: stable; - fallback gdyby JS nie zadziałał */
}
html.popup-open body {
    overflow: hidden;
    /* padding-right ustawiany dynamicznie przez JS (kompensacja scrollbara) */
}

/* Order/Project/Audit forms - spójna typografia + odstępy */
.popup--order .popup__body,
.popup--info .popup__body {
    padding: clamp(20px, 2.5vw, 32px) clamp(20px, 3vw, 40px);
}

/* Order form - spójność wszędzie */
.order-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.order-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.order-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.order-form__label {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-dark, #121C27);
    letter-spacing: -0.005em;
}

/* Mobile - formularze pełna szerokość */
@media (max-width: 640px) {
    .popup--order .popup__body,
    .popup--info .popup__body,
    .popup--faq .popup__body {
        padding: 16px 18px 20px;
    }
    .order-form__grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .order-form {
        gap: 14px;
    }
    .popup__title {
        font-size: 18px !important;
    }
    .popup__subtitle {
        font-size: 12.5px !important;
        line-height: 1.45;
    }
}

/* Focus state - accessible */
.popup__close:focus-visible,
.order-form__input:focus-visible,
.order-form__textarea:focus-visible,
.wycena__input:focus-visible,
.wycena__textarea:focus-visible {
    outline: 2px solid var(--color-primary, #FF3C00);
    outline-offset: 2px;
}

/* Smooth scroll wewnątrz body popupa */
.popup__body {
    scroll-behavior: smooth;
    overscroll-behavior: contain;  /* zapobiega scrollowi body przez popup */
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar w popupie - chudszy, dyskretny */
.popup__body::-webkit-scrollbar { width: 6px; }
.popup__body::-webkit-scrollbar-track { background: transparent; }
.popup__body::-webkit-scrollbar-thumb {
    background: rgba(18, 28, 39, 0.18);
    border-radius: 4px;
}
.popup__body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 60, 0, 0.4);
}

/* Click target dla close - większy na mobile (44×44 minimum dla touch) */
@media (max-width: 768px) {
    .popup__close {
        min-height: 44px;
        padding: 10px 16px !important;
    }
    .popup__close span {
        display: none;  /* na mobile tylko ikona */
    }
}

/* Modal otwarte - body tag dla focus management */
.popup-overlay.is-open {
    pointer-events: auto;
}
.popup-overlay {
    pointer-events: none;
}
.popup-overlay .popup {
    pointer-events: auto;
}

/* Print - modale niewidoczne */
@media print {
    .popup-overlay { display: none !important; }
}


/* ============================================================================ */
/* v6.9.119 - MARKETING INTERNETOWY: form polish + katalog mobile UX            */
/* ============================================================================ */

/* === v6.9.121 - Form polish wg UX research === */

/* Legend - czytelne polecenie + hint */
body.pg-marketing-internetowy .mkt-form__legend {
    display: block !important;
    width: 100%;
    margin-bottom: clamp(16px, 2vw, 22px);
    padding: 0 !important;
    border: none !important;
}
body.pg-marketing-internetowy .mkt-form__legend-text {
    display: block;
    font-family: var(--font-heading);
    font-size: clamp(18px, 1.9vw, 22px);
    font-weight: 700;
    color: var(--color-dark, #121C27);
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-bottom: 6px;
}
body.pg-marketing-internetowy .mkt-form__hint {
    display: block;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 400;
    color: var(--color-text-muted, #6B7280);
    letter-spacing: 0;
    text-transform: none;
}

/* === Service list - tight rows, jeden wiersz na opcję, bez ikon === */
body.pg-marketing-internetowy .mkt-form__services {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    grid-template-columns: none !important;
}
body.pg-marketing-internetowy .mkt-form__service-card {
    position: relative;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    text-align: left !important;
    gap: 12px;
    min-height: 0 !important;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--color-border, #E5E2E0);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
body.pg-marketing-internetowy .mkt-form__service--advice .mkt-form__service-card {
    background: #fff !important;
}

/* Ikony usunięte - bez wizualnego balastu */
body.pg-marketing-internetowy .mkt-form__service-icon {
    display: none !important;
}

/* Checkbox - po lewej, jak w klasycznej liście */
body.pg-marketing-internetowy .mkt-form__service-check {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid #CFD3DA;
    border-radius: 5px;
    background: #fff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    order: 0;
}

/* Tytuł + subtitle w jednej linii, subtitle separatorem · */
body.pg-marketing-internetowy .mkt-form__service-card strong,
body.pg-marketing-internetowy .mkt-form__service-card span:not(.mkt-form__service-check):not(.mkt-form__service-icon) {
    display: inline !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}
body.pg-marketing-internetowy .mkt-form__service-card strong {
    order: 1;
    font-family: var(--font-heading);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-dark, #121C27);
    letter-spacing: -0.005em;
    line-height: 1.3;
    flex: 0 1 auto;
}
body.pg-marketing-internetowy .mkt-form__service-card span:not(.mkt-form__service-check):not(.mkt-form__service-icon) {
    order: 2;
    display: inline-flex !important;
    align-items: center;
    padding: 3px 10px;
    margin-left: 10px !important;
    background: var(--color-bg-alt, #F1EEEE);
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-text-muted, #6B7280);
    line-height: 1.4;
    letter-spacing: 0.005em;
    flex: 0 0 auto;
    transition: background 0.15s, color 0.15s;
}

/* Hover - pill też zmienia barwę dla spójności */
body.pg-marketing-internetowy .mkt-form__service:hover .mkt-form__service-card span:not(.mkt-form__service-check):not(.mkt-form__service-icon) {
    background: rgba(255, 60, 0, 0.10);
    color: var(--color-primary, #FF3C00);
}

/* Selected - pill mocniejszy pomarańczowy */
body.pg-marketing-internetowy .mkt-form__service input:checked + .mkt-form__service-card span:not(.mkt-form__service-check):not(.mkt-form__service-icon) {
    background: rgba(255, 60, 0, 0.15);
    color: var(--color-primary, #FF3C00);
    font-weight: 600;
}

/* Hover - light bg + orange border */
body.pg-marketing-internetowy .mkt-form__service:hover .mkt-form__service-card {
    border-color: var(--color-primary, #FF3C00);
    background: rgba(255, 60, 0, 0.03);
}
body.pg-marketing-internetowy .mkt-form__service:hover .mkt-form__service-check {
    border-color: var(--color-primary, #FF3C00);
}

/* Checked - pomarańczowe tło + checkbox wypełniony */
body.pg-marketing-internetowy .mkt-form__service input:checked + .mkt-form__service-card {
    background: rgba(255, 60, 0, 0.06) !important;
    border-color: var(--color-primary, #FF3C00);
}
body.pg-marketing-internetowy .mkt-form__service input:checked + .mkt-form__service-card .mkt-form__service-check {
    background: var(--color-primary, #FF3C00) !important;
    border-color: var(--color-primary, #FF3C00) !important;
    color: #fff !important;
}
body.pg-marketing-internetowy .mkt-form__service input:focus-visible + .mkt-form__service-card {
    outline: 2px solid var(--color-primary, #FF3C00);
    outline-offset: 2px;
}

/* Mobile - pill na własnej linii (mniej miejsca w wierszu) */
@media (max-width: 540px) {
    body.pg-marketing-internetowy .mkt-form__service-card {
        padding: 11px 12px;
        gap: 10px;
        flex-wrap: wrap;
    }
    body.pg-marketing-internetowy .mkt-form__service-card span:not(.mkt-form__service-check):not(.mkt-form__service-icon) {
        margin-left: 30px !important;  /* wcięta na pozycję tytułu (checkbox 20 + gap 12) */
        margin-top: 2px !important;
    }
}

/* Service tytuł - dominująca etykieta */
body.pg-marketing-internetowy .mkt-form__service-card strong {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark, #121C27);
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-top: 4px;
    width: 100%;
    text-wrap: balance;
}

/* Subtitle - muted, dyskretny */
body.pg-marketing-internetowy .mkt-form__service-card span:not(.mkt-form__service-check):not(.mkt-form__service-icon) {
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--color-text-muted, #8A909A);
    line-height: 1.35;
    width: 100%;
    text-wrap: balance;
    margin-top: auto;            /* zawsze przy dolnej krawędzi */
    padding-top: 4px;
}

/* Form fields polish - większe pola, czystsza hierarchia */
body.pg-marketing-internetowy .mkt-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 24px;
}
body.pg-marketing-internetowy .mkt-form__group--full {
    grid-column: 1 / -1;
}
body.pg-marketing-internetowy .mkt-form__label {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-dark, #121C27);
    margin-bottom: 6px;
    line-height: 1.3;
    display: block;
}
body.pg-marketing-internetowy .mkt-form__opt {
    font-weight: 400;
    color: var(--color-text-muted, #8A909A);
    font-size: 12px;
}
body.pg-marketing-internetowy .mkt-form__req {
    color: var(--color-primary, #FF3C00);
    font-weight: 700;
}
body.pg-marketing-internetowy .mkt-form__input,
body.pg-marketing-internetowy .mkt-form__textarea {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    padding: 13px 16px;
    border: 1.5px solid var(--color-border, #E5E2E0);
    border-radius: 10px;
    background: #fff;
    color: var(--color-dark, #121C27);
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    min-height: 48px;  /* tap target a11y */
}
body.pg-marketing-internetowy .mkt-form__input:hover,
body.pg-marketing-internetowy .mkt-form__textarea:hover {
    border-color: rgba(255, 60, 0, 0.4);
}
body.pg-marketing-internetowy .mkt-form__input:focus,
body.pg-marketing-internetowy .mkt-form__textarea:focus {
    outline: none;
    border-color: var(--color-primary, #FF3C00);
    box-shadow: 0 0 0 3px rgba(255, 60, 0, 0.12);
    background: #fff;
}
body.pg-marketing-internetowy .mkt-form__input::placeholder,
body.pg-marketing-internetowy .mkt-form__textarea::placeholder {
    color: #B0B7C0;
    font-style: normal;
}
body.pg-marketing-internetowy .mkt-form__textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.6;
}

/* RODO checkbox - subtelne tło, jaśniej widoczny */
body.pg-marketing-internetowy .mkt-form__check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-bg-alt, #FAF7F5);
    border-radius: 10px;
    border: 1px solid var(--color-border, #E5E2E0);
    margin-top: 18px;
    cursor: pointer;
}
body.pg-marketing-internetowy .mkt-form__check:has(input:checked) {
    background: rgba(255, 60, 0, 0.04);
    border-color: rgba(255, 60, 0, 0.3);
}
body.pg-marketing-internetowy .mkt-form__check-text {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-text-muted, #5A6270);
}
body.pg-marketing-internetowy .mkt-form__check-text a {
    color: var(--color-primary, #FF3C00);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Submit row - przycisk większy + trust signal */
body.pg-marketing-internetowy .mkt-form__submit-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}
body.pg-marketing-internetowy .mkt-form__submit-btn {
    width: 100%;
    max-width: 420px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    min-height: 56px;
    justify-content: center;
}
body.pg-marketing-internetowy .mkt-form__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--color-text-muted, #8A909A);
    text-align: center;
    flex-wrap: wrap;
}
body.pg-marketing-internetowy .mkt-form__trust svg {
    color: var(--color-primary, #FF3C00);
    flex-shrink: 0;
}

/* Mobile polish - single col + większe touch targets */
@media (max-width: 720px) {
    body.pg-marketing-internetowy .mkt-form__services {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    body.pg-marketing-internetowy .mkt-form__service-card {
        min-height: 120px;
        padding: 16px 14px 14px;
    }
    body.pg-marketing-internetowy .mkt-form__service-icon {
        width: 38px;
        height: 38px;
    }
    body.pg-marketing-internetowy .mkt-form__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    body.pg-marketing-internetowy .mkt-form__input,
    body.pg-marketing-internetowy .mkt-form__textarea {
        font-size: 16px;  /* zapobiega zoomowi iOS na focus */
    }
}


/* === Katalog PDF - mobile page indicator + scroll hint === */
.pdf-modal__mobile-indicator {
    display: none;
    position: fixed;
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 18px;
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
    border-radius: 50px;
    font-family: var(--font-heading, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.pdf-modal.is-open .pdf-modal__mobile-indicator[aria-hidden="false"] {
    opacity: 1;
}
.pdf-modal__mobile-page {
    color: var(--color-primary, #FF3C00);
}
.pdf-modal__mobile-sep {
    margin: 0 6px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

/* Scroll hint - pulsujący chip przy dolnej krawędzi */
.pdf-modal__scroll-hint {
    display: none;
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--color-primary, #FF3C00);
    color: #fff;
    border-radius: 50px;
    font-family: var(--font-heading, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    z-index: 6;
    pointer-events: none;
    box-shadow: 0 8px 24px -4px rgba(255, 60, 0, 0.5);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    animation: pdfScrollBounce 1.6s ease-in-out infinite;
}
.pdf-modal.is-open .pdf-modal__scroll-hint.is-visible {
    opacity: 1;
}
@keyframes pdfScrollBounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, -6px); }
}

/* Pokaż mobile UI tylko na małych ekranach */
@media (max-width: 900px) {
    .pdf-modal__mobile-indicator { display: inline-flex; }
    .pdf-modal__scroll-hint { display: inline-flex; }
}
@media (max-width: 480px) {
    .pdf-modal__scroll-hint span { display: none; }  /* tylko strzałka na bardzo małych */
    .pdf-modal__scroll-hint { padding: 12px 14px; }
}


/* ============================================================================ */
/* v6.9.136 - UNIFIED FORMS                                                     */
/* Wszystkie formularze na stronie (kontakt, marketing, modale popup, audyt)    */
/* mają identyczną typografię, padding, focus, button.                          */
/* Master pattern = kt-form / mkt-form.                                          */
/* ============================================================================ */

/* --- INPUTY + TEXTAREA --- */
.order-form__input,
.order-form__textarea,
.wycena__input,
.wycena__textarea,
.kt-form__input,
.kt-form__textarea,
.mkt-form__input,
.mkt-form__textarea,
.si-audit-form__input,
.si-audit-form__textarea {
    font-family: var(--font-body), system-ui, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    padding: 13px 16px !important;
    border: 1.5px solid var(--color-border, #E5E2E0) !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--color-dark, #121C27) !important;
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.order-form__textarea,
.wycena__textarea,
.kt-form__textarea,
.mkt-form__textarea,
.si-audit-form__textarea {
    line-height: 1.6 !important;
    min-height: 110px;
    resize: vertical;
}

/* Hover */
.order-form__input:hover,
.order-form__textarea:hover,
.wycena__input:hover,
.wycena__textarea:hover,
.kt-form__input:hover,
.kt-form__textarea:hover,
.mkt-form__input:hover,
.mkt-form__textarea:hover {
    border-color: rgba(255, 60, 0, 0.4) !important;
}

/* Focus - pomarańczowa ramka + glow ring */
.order-form__input:focus,
.order-form__textarea:focus,
.wycena__input:focus,
.wycena__textarea:focus,
.kt-form__input:focus,
.kt-form__textarea:focus,
.mkt-form__input:focus,
.mkt-form__textarea:focus {
    outline: none !important;
    border-color: var(--color-primary, #FF3C00) !important;
    box-shadow: 0 0 0 3px rgba(255, 60, 0, 0.12) !important;
}

/* Placeholder - muted */
.order-form__input::placeholder,
.order-form__textarea::placeholder,
.wycena__input::placeholder,
.wycena__textarea::placeholder,
.kt-form__input::placeholder,
.kt-form__textarea::placeholder,
.mkt-form__input::placeholder,
.mkt-form__textarea::placeholder {
    color: #B0B7C0 !important;
    font-style: normal;
}

/* --- LABELE --- */
.order-form__label,
.kt-form__label,
.mkt-form__label {
    font-family: var(--font-heading), sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--color-dark, #121C27) !important;
    line-height: 1.3 !important;
    margin-bottom: 6px !important;
    display: block;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* --- SUBMIT BUTTONS --- */
.order-form__submit,
.kt-form__submit,
.mkt-form__submit-btn,
.wycena__submit {
    min-height: 56px !important;
    padding: 16px 32px !important;
    font-family: var(--font-heading), sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.005em;
}

/* Mobile - fix iOS zoom */
@media (max-width: 768px) {
    .order-form__input,
    .order-form__textarea,
    .wycena__input,
    .wycena__textarea,
    .kt-form__input,
    .kt-form__textarea,
    .mkt-form__input,
    .mkt-form__textarea {
        font-size: 16px !important;
    }
}