/* ═══════════════════════════════════════════════════════════════════
   AutoSOC — Website Stylesheet
   Design: Dark, minimal, refined. Inspired by Wazuh, Elastic, Zabbix.
   ═══════════════════════════════════════════════════════════════════ */

/* ── RESET & BASE ─────────────────────────────────────────────────── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colors — Light Theme */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fb;
    --bg-card: #ffffff;
    --bg-card-hover: #f3f5f8;
    --bg-surface: #f0f2f5;

    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;

    --accent: #2563eb;
    --accent-glow: rgba(37, 99, 235, 0.08);
    --accent-hover: #3b82f6;
    --accent-dark: #1d4ed8;

    --border: rgba(0, 0, 0, 0.06);
    --border-light: rgba(0, 0, 0, 0.1);

    --success: #16a34a;
    --warning: #d97706;
    --danger: #dc2626;

    /* Typography */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;

    /* Spacing */
    --container: 1400px;
    --section-py: 3.5rem;
    --gap: 1.5rem;

    /* Transitions */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 0.3s;

    /* Border radius */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}


html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}

ul { list-style: none; }
img { max-width: 100%; display: block; }

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

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


/* ── LIQUID GLASS DESIGN SYSTEM ───────────────────────────────────── */

/* Shimmer animation for glass hover */
@keyframes glass-shimmer {
    0%   { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(200%) skewX(-15deg); }
}

@keyframes glass-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
    50%      { box-shadow: 0 0 24px 2px rgba(37, 99, 235, 0.08); }
}


/* ── BUTTONS ──────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font);
    font-weight: 600;
    border-radius: 9999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.4s var(--ease);
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Shimmer layer for all buttons */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent
    );
    transform: translateX(-100%) skewX(-15deg);
    transition: none;
    z-index: 1;
    pointer-events: none;
}

.btn:hover::before {
    animation: glass-shimmer 0.6s ease forwards;
}

.btn--sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
}

.btn--lg {
    padding: 0.875rem 2rem;
    font-size: 1rem;
}

/* ── Primary Button — Liquid Glass ────── */
.btn--primary {
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.85) 0%,
        rgba(59, 130, 246, 0.9) 50%,
        rgba(99, 102, 241, 0.85) 100%
    );
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(37, 99, 235, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.08);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.btn--primary:hover {
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.95) 0%,
        rgba(59, 130, 246, 1) 50%,
        rgba(99, 102, 241, 0.95) 100%
    );
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 8px 32px rgba(37, 99, 235, 0.3),
        0 2px 8px rgba(37, 99, 235, 0.2);
}

.btn--primary:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 2px 4px rgba(0, 0, 0, 0.15),
        0 1px 3px rgba(37, 99, 235, 0.15);
}

/* ── Outline Button — Frosted Glass ────── */
.btn--outline {
    background: rgba(255, 255, 255, 0.45);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03),
        0 1px 4px rgba(0, 0, 0, 0.05),
        0 0 0 0.5px rgba(0, 0, 0, 0.05);
}

.btn--outline:hover {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(37, 99, 235, 0.25);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03),
        0 4px 16px rgba(37, 99, 235, 0.1),
        0 1px 4px rgba(0, 0, 0, 0.06);
}

.btn--outline:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.5);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.06),
        0 0 0 0.5px rgba(0, 0, 0, 0.05);
}

/* ── Ghost Button — Subtle Glass ────── */
.btn--ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

.btn--ghost:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 1px 4px rgba(0, 0, 0, 0.04);
}


/* ── NAVIGATION ───────────────────────────────────────────────────── */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 1rem 0;
    transition: all var(--duration) var(--ease);
    background: transparent;
}

.nav--scrolled {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.75rem 0;
    box-shadow:
        inset 0 -1px 0 rgba(255, 255, 255, 0.3),
        0 4px 24px rgba(0, 0, 0, 0.04);
}

.nav__container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.nav__logo-img {
    height: 25px;
    width: auto;
    display: block;
}

.nav__logo-icon {
    color: var(--accent);
    font-size: 1.5rem;
}

.nav__logo-text {
    color: var(--text-primary);
}

/* ── NAV LOGO COLLAB (AutoSOC × SZBI Manager) ──────────────────── */
.nav__logo-group {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.nav__logo-group .nav__logo {
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.nav__logo-group .nav__logo:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.nav__logo-cross {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-muted);
    opacity: 0.55;
    user-select: none;
    line-height: 1;
}

.nav__logo-img--secondary {
    height: 42px;
}

@media (max-width: 768px) {
    .nav__logo-group {
        gap: 0.5rem;
    }
    .nav__logo-group .nav__logo-img {
        height: 22px;
    }
    .nav__logo-img--secondary {
        height: 30px;
    }
    .nav__logo-cross {
        font-size: 0.8rem;
    }
}

@media (max-width: 420px) {
    .nav__logo-cross {
        display: none;
    }
    .nav__logo-group {
        gap: 0.4rem;
    }
    .nav__logo-group .nav__logo-img {
        height: 20px;
    }
    .nav__logo-img--secondary {
        height: 26px;
    }
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    margin-right: 2rem;
    list-style: none;
}

.nav__item {
    position: relative;
    list-style: none;
}

.nav__link {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
    background: none;
    border: none;
    font-family: var(--font);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius);
    transition: all var(--duration) var(--ease);
    text-decoration: none;
}

.nav__link:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.35);
}

/* Chevron icon */
.nav__chevron {
    transition: transform var(--duration) var(--ease);
    flex-shrink: 0;
}

.nav__item--dropdown.open .nav__chevron {
    transform: rotate(180deg);
}

/* Dropdown panel — Liquid Glass */
.nav__dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 210px;
    padding: 0.5rem;
    list-style: none;

    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03),
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s var(--ease);
    z-index: 1000;
}

.nav__item--dropdown.open .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.nav__dropdown-link {
    display: block;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius);
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
    text-decoration: none;
}

.nav__dropdown-link:hover {
    color: var(--accent);
    background: rgba(37, 99, 235, 0.06);
}

.nav__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav__actions .btn {
    background: #508BF7;
    color: #fff;
    border: 1px solid rgba(80, 139, 247, 0.3);
    box-shadow:
        0 1px 4px rgba(80, 139, 247, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav__actions .btn:hover {
    background: #3d7af0;
    color: #fff;
    border-color: rgba(80, 139, 247, 0.5);
    transform: translateY(-1px);
    box-shadow:
        0 4px 16px rgba(80, 139, 247, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav__actions .btn:active {
    transform: translateY(0);
    background: #3570e0;
}

.nav__hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s var(--ease);
}

.nav__hamburger:hover {
    background: rgba(255, 255, 255, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

.nav__hamburger span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: all var(--duration) var(--ease);
    border-radius: 2px;
}


/* ── HERO ─────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 8rem 0 4rem;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 20%, #EEF2FF 45%, #EEF2FF 100%);
}

.hero > .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 9999px;
    font-size: 0.8rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(37, 99, 235, 0.06);
    transition: all 0.4s var(--ease);
}

.hero__badge:hover {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 12px rgba(37, 99, 235, 0.1);
}

.hero__badge-dot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__title {
    font-size: clamp(2.5rem, 4.4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
    text-align: center;
}

.hero__title-accent {
    background: linear-gradient(135deg, var(--accent), #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 600px;
    margin-inline: auto;
    margin-bottom: 2rem;
    text-align: justify;
}

.hero__cta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    justify-content: center;
}

.hero__stats {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    justify-content: center;
}

.hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.hero__stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hero__stat-divider {
    width: 1px;
    height: 32px;
    background: var(--border-light);
}

/* Hero Dashboard Preview */
.hero__visual {
    display: flex;
    justify-content: center;
}

a.hero__dashboard {
    display: block;
    text-decoration: none;
    color: inherit;
}

.hero__dashboard {
    width: 100%;
    max-width: 100%;
    height: 416px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.5);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 20px 60px rgba(0, 0, 0, 0.08),
        0 0 120px rgba(37, 99, 235, 0.04);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.hero__dashboard:hover {
    transform: scale(1.03);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 12px 32px rgba(0, 0, 0, 0.16),
        0 30px 80px rgba(0, 0, 0, 0.1),
        0 0 140px rgba(37, 99, 235, 0.06);
}

.hero__dashboard-bar {
    display: none;
}

.hero__dashboard-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.hero__dashboard-title {
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.hero__dashboard-body {
    padding: 0;
    overflow: hidden;
    height: 520px;
}

.hero__dashboard-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 0%;
    display: block;
}

/* Pre-rendered laptop mockup in the AutoSOC hero (transparent PNG, 822×548,
   laptop fills the frame with ~1% margin). Reuses .hero__laptop-frame
   (object-fit: contain + drop-shadow); only aspect + size differ. */
.hero__laptop--autosoc {
    display: block;
    max-width: 640px;
    aspect-ratio: 813 / 540;
    position: relative;
    z-index: 0;
    transform: scale(1.3);
    transform-origin: center center;
    cursor: zoom-in;
    text-decoration: none;
    color: inherit;
}

/* Soft elliptical ground shadow under the laptop base — grounds the
   transparent mockup so it doesn't look like it floats. */
.hero__laptop--autosoc::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 55%);
    width: 52%;
    height: 11%;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.30) 0%, rgba(15, 23, 42, 0) 70%);
    filter: blur(16px);
    z-index: -1;
    pointer-events: none;
}


/* ── SOCIAL PROOF ─────────────────────────────────────────────────── */
.proof {
    padding: 2.5rem 0;
}

.proof .container {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.proof__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    flex-shrink: 0;
}

.proof__logos {
    display: flex;
    align-items: center;
    gap: 5rem;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
}

.proof__logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    transition: color var(--duration) var(--ease);
}

.proof__logo:hover {
    color: var(--text-secondary);
}

.proof__logo-img {
    height: 84px;
    width: auto;
    display: block;
    opacity: 0.7;
    transition: opacity var(--duration) var(--ease);
}

.proof__logo:hover .proof__logo-img {
    opacity: 1;
}


/* ── SECTIONS ─────────────────────────────────────────────────────── */
.section {
    padding: var(--section-py) 0;
    position: relative;
}

.section--dark {
    background: var(--bg-secondary);
}

.section--colored {
    background: #EEF2FF;
    position: relative;
    overflow: hidden;
}

.section--colored > .container {
    position: relative;
    z-index: 2;
}

.section__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem;
}

.section__tag {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    background: rgba(37, 99, 235, 0.06);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 1px 4px rgba(37, 99, 235, 0.06);
    transition: all 0.4s var(--ease);
}

/* Tags inside colored sections get stronger glass */
.section--colored .section__tag {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 8px rgba(37, 99, 235, 0.08);
}

.section__title {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.section__desc {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
}


/* ── PROBLEM CARDS ────────────────────────────────────────────────── */
.problems {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.problem-card {
    padding: 2.4rem 2rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    transition: box-shadow 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

.problem-card:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 122, 53, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 32px rgba(255, 122, 53, 0.1),
        0 0 20px rgba(255, 122, 53, 0.08),
        0 0 0 1px rgba(255, 122, 53, 0.1);
}

.problem-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    transition: all 0.4s var(--ease);
}

.problem-card__icon img {
    width: 56px;
    height: 56px;
    filter: invert(50%) sepia(95%) saturate(1500%) hue-rotate(348deg) brightness(102%) contrast(97%);
    transition: filter 0.4s var(--ease);
}

.problem-card__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
    text-align: center;
}

.problem-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: justify;
}


/* ── PIPELINE (kept for fallback) ─────────────────────────────────── */
.pipeline { display: none; }
.pipeline__connector { display: none; }

/* ── GRAPH — Horizontal Kill Chain ───────────────────────────────── */
.graph {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 1fr auto 1fr;
    position: relative;
    margin-bottom: 2rem;
    padding: 0;
    min-height: 500px;
}

/* Zigzag spine covering the full graph area */
.graph__spine {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

.graph__spine svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Each column spans all 3 rows */
.graph__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    grid-row: 1 / -1;
}

/* TOP variant: card on top, node sits at zigzag peak (~30% from top) */
.graph__col--top {
    justify-content: center;
}

.graph__col--top .graph__card {
    order: 1;
    flex: 0.75;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 0;
    min-height: 0;
}
.graph__col--top .graph__dash {
    order: 2;
}
.graph__col--top .graph__node {
    order: 3;
}
/* Spacer below node → pushes node up toward zigzag peak */
.graph__col--top::after {
    content: '';
    order: 4;
    flex: 1.75;
}

/* BOTTOM variant: node sits at zigzag valley */
.graph__col--bottom {
    justify-content: center;
}

/* Spacer above node → pushes node down toward zigzag valley */
.graph__col--bottom::before {
    content: '';
    order: 0;
    flex: 1.75;
}
.graph__col--bottom .graph__node {
    order: 1;
}
.graph__col--bottom .graph__dash {
    order: 2;
}
.graph__col--bottom .graph__card {
    order: 3;
    flex: 0.75;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0;
    min-height: 0;
}

/* ── Node (numbered circle on the spine) ─────────────────────────── */
.graph__node {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.85),
        0 0 0 7px rgba(37, 99, 235, 0.15),
        0 4px 20px rgba(37, 99, 235, 0.3);
    position: relative;
    z-index: 3;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.graph__col:hover .graph__node {
    transform: scale(1.1);
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.9),
        0 0 0 8px rgba(37, 99, 235, 0.25),
        0 6px 24px rgba(37, 99, 235, 0.35);
}

.graph__node span {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    font-family: var(--font-mono);
    line-height: 1;
}

/* ── Dashed connector (vertical line between node and card) ──────── */
.graph__dash {
    width: 2px;
    height: 20px;
    flex-shrink: 0;
    border: none;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--accent) 0,
        var(--accent) 4px,
        transparent 4px,
        transparent 9px
    );
    opacity: 0.3;
}

/* ── Card (step description) ─────────────────────────────────────── */
.graph__card {
    text-align: center;
    padding: 0.75rem 0.35rem;
    max-width: 100%;
    transition: transform 0.4s var(--ease);
}

.graph__col--top:hover .graph__card {
    transform: translateY(-4px);
}

.graph__col--bottom:hover .graph__card {
    transform: translateY(4px);
}

.graph__card-icon {
    width: 56px;
    height: 56px;
    min-height: 56px;
    flex-shrink: 0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 50%;
    margin: 0 auto 0.6rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(37, 99, 235, 0.1);
    transition: all 0.4s var(--ease);
}

.graph__card-icon img {
    width: 40px;
    height: 40px;
    display: block;
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}

.graph__col:hover .graph__card-icon {
    background: rgba(255, 255, 255, 0.75);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 6px 20px rgba(37, 99, 235, 0.18);
    border-color: rgba(37, 99, 235, 0.15);
}

.graph__card h3 {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--text-primary);
}

.graph__card p {
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.solution-loop {
    display: flex;
    justify-content: center;
}

.solution-loop__inner {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 9999px;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 8px rgba(37, 99, 235, 0.06);
    transition: all 0.4s var(--ease);
    animation: glass-pulse 4s infinite;
}

.solution-loop__inner:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 4px 16px rgba(37, 99, 235, 0.12);
}


/* ── FEATURE SHOWCASE ─────────────────────────────────────────────── */
.showcase {
    display: flex;
    gap: 2rem;
    min-height: 460px;
}

.showcase__nav {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 280px;
    flex-shrink: 0;
}

.showcase__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s var(--ease);
    text-align: left;
}

.showcase__icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    opacity: 0.5;
    transition: opacity 0.3s var(--ease), filter 0.3s var(--ease);
    /* default: dark gray */
    filter: brightness(0) saturate(100%) opacity(0.6);
}

.showcase__item:hover {
    background: rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
}

.showcase__item:hover .showcase__icon {
    opacity: 1;
    filter: brightness(0) saturate(100%) opacity(0.8);
}

.showcase__item.active {
    background: rgba(255, 255, 255, 0.6);
    border-left-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
    box-shadow:
        0 2px 12px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.showcase__item.active .showcase__icon {
    opacity: 1;
    /* blue #2563eb */
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}

.showcase__panel {
    flex: 1;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    padding: 1.5rem 2rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 4px 24px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.showcase__content {
    display: none;
}

.showcase__content.active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: showcaseFadeIn 0.35s var(--ease);
}

.showcase__text {
    min-width: 0;
}

a.showcase__mockup {
    display: block;
    text-decoration: none;
    color: inherit;
}

.showcase__mockup {
    width: 100%;
    min-width: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.1);
    background: var(--bg-secondary);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 12px 40px rgba(0, 0, 0, 0.06);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    cursor: pointer;
}

.showcase__mockup:hover {
    transform: scale(1.02);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12),
        0 20px 48px rgba(0, 0, 0, 0.08);
}

.showcase__mockup-bar {
    display: none;
}

.showcase__mockup-body {
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    /* Crop: cut left sidebar nav, focus on main content area */
    aspect-ratio: 16 / 7.5;
}

.showcase__mockup-img {
    width: 135%;
    height: 135%;
    object-fit: cover;
    object-position: 85% 0%;
    display: block;
}

/* Per-feature cropping overrides */
/* AI analysis, IoC, Correlation — show from left edge */
.showcase__mockup-img--left {
    width: 118%;
    height: 118%;
    object-position: 12% 0%;
}

/* Alerts, Stats — reduce zoom, show more content */
.showcase__mockup-img--wide {
    width: 115%;
    height: 115%;
    object-position: 70% 0%;
}

/* DFIR-IRIS — new screenshot, balanced crop */
.showcase__mockup-img--iris {
    width: 118%;
    height: 118%;
    object-position: 70% 0%;
}

/* Pre-cropped (_cutted) screenshots — sidebar already removed in the PNG,
   so fill the mockup body 1:1 instead of the per-feature zoom/pan crops. */
.showcase__mockup-img--cutted {
    width: 100%;
    height: 100%;
    object-position: 50% 0%;
}

@keyframes showcaseFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.showcase__badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.85), rgba(99, 102, 241, 0.85));
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
}

.showcase__title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
    color: var(--text-primary);
}

.showcase__desc {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    text-align: justify;
}

.showcase__highlights {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.showcase__highlights li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.showcase__highlights li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #6366f1);
    box-shadow: 0 0 6px rgba(37, 99, 235, 0.3);
}

/* ── FEATURE CARDS ────────────────────────────────────────────────── */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    margin-bottom: 4rem;
}

.feature-card {
    position: relative;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    transition: all 0.4s var(--ease);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 32px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(37, 99, 235, 0.08);
}

.feature-card--highlight {
    border-color: rgba(37, 99, 235, 0.15);
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.06),
        rgba(255, 255, 255, 0.55)
    );
}

.feature-card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.2rem 0.6rem;
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.85),
        rgba(99, 102, 241, 0.85)
    );
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 2px 8px rgba(37, 99, 235, 0.2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.feature-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    color: var(--accent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(37, 99, 235, 0.06);
    transition: all 0.4s var(--ease);
}

.feature-card:hover .feature-card__icon {
    background: rgba(37, 99, 235, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 8px rgba(37, 99, 235, 0.1);
}

.feature-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

.feature-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}


/* ── MODULE PREVIEW ───────────────────────────────────────────────── */
.module-preview {
    margin-top: 2rem;
}

.module-preview__header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.module-preview__header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.module-preview__header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.module-preview__tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.module-tab {
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.4s var(--ease);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

.module-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: translateX(-100%) skewX(-15deg);
    pointer-events: none;
}

.module-tab:hover::before {
    animation: glass-shimmer 0.5s ease forwards;
}

.module-tab:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--text-primary);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

.module-tab.active {
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.85) 0%,
        rgba(59, 130, 246, 0.9) 50%,
        rgba(99, 102, 241, 0.85) 100%
    );
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(37, 99, 235, 0.25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.module-preview__screen {
    position: relative;
    max-width: 1050px;
    margin: 0 auto;
}

.module-screen {
    display: none;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.45);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 20px 60px rgba(0, 0, 0, 0.06);
}

.module-screen.active {
    display: block;
    animation: fadeIn 0.3s var(--ease);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.module-screen__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.module-screen__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.module-screen__bar span:last-child {
    margin-left: 8px;
}

.module-screen__body {
    padding: 3rem 2rem;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.module-screen__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    max-width: 400px;
}


/* ── SZBI MANAGER ─────────────────────────────────────────────────── */
.szbi-features {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: start;
}

.szbi-col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.szbi-col--center {
    align-items: center;
    gap: 2rem;
    padding-top: 1rem;
}

.szbi-card {
    padding: 1.75rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    transition: all 0.4s var(--ease);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

.szbi-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(37, 99, 235, 0.12);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 32px rgba(0, 0, 0, 0.06);
}

.szbi-card__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--accent);
}

.szbi-card__header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.szbi-card__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.szbi-card__list li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-left: 1.25rem;
    position: relative;
}

.szbi-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.5;
}

/* Synergy diagram */
.szbi-synergy {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.szbi-synergy__box {
    padding: 1.25rem 2rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius);
    text-align: center;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width: 200px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.4s var(--ease);
}

.szbi-synergy__box:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
}

.szbi-synergy__box--top {
    border-color: rgba(59, 130, 246, 0.2);
}

.szbi-synergy__box--bottom {
    border-color: rgba(34, 197, 94, 0.2);
}

.szbi-synergy__label {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
}

.szbi-synergy__sublabel {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.szbi-synergy__connector {
    color: var(--text-muted);
}

.szbi-synergy__tagline {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.szbi-stats {
    display: flex;
    gap: 2rem;
}

.szbi-stat {
    text-align: center;
}

.szbi-stat__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.02em;
}

.szbi-stat__label {
    font-size: 0.75rem;
    color: var(--text-muted);
}


/* ── ON-PREMISE ───────────────────────────────────────────────────── */
.onprem-hero {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.onprem-hero__visual {
    flex: 0 0 380px;
    display: flex;
    justify-content: center;
}

/* Triangle diagram */
.onprem-triangle {
    position: relative;
    width: 360px;
    height: 320px;
}

.onprem-triangle__connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.onprem-triangle__node {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    z-index: 1;
}

.onprem-triangle__node--top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.onprem-triangle__node--bl {
    bottom: 0;
    left: 0;
}

.onprem-triangle__node--br {
    bottom: 0;
    right: 0;
}

.onprem-triangle__icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.4s var(--ease);
}

.onprem-triangle__icon-wrap--muted {
    background: rgba(148, 163, 184, 0.08);
    border: 1.5px solid rgba(148, 163, 184, 0.15);
}

.onprem-triangle__icon-wrap--active {
    background: rgba(37, 99, 235, 0.06);
    border: 1.5px solid rgba(37, 99, 235, 0.15);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

.onprem-triangle__icon--muted {
    opacity: 0.35;
    filter: grayscale(1);
}

.onprem-triangle__icon--active {
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}

.onprem-triangle__label {
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.onprem-triangle__label--muted {
    color: var(--text-muted);
    opacity: 0.5;
}

.onprem-triangle__label--accent {
    color: var(--accent);
    font-weight: 600;
}

.onprem-triangle__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    z-index: 2;
}

.onprem-triangle__badge--x {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.onprem-triangle__badge--check {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

/* Infinity icon between server & endpoint */
.onprem-triangle__infinity {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
}

.onprem-triangle__infinity-icon {
    width: 100px;
    height: auto;
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}

/* Benefits list */
.onprem-hero__benefits {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.onprem-benefit {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius);
    transition: all 0.4s var(--ease);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(0, 0, 0, 0.03);
}

.onprem-benefit:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(37, 99, 235, 0.1);
    transform: translateX(4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 6px 24px rgba(0, 0, 0, 0.05);
}

.onprem-benefit__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(99, 102, 241, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
}

.onprem-benefit__img {
    width: 22px;
    height: 22px;
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}

.onprem-benefit__text h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.onprem-benefit__text p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.55;
    text-align: justify;
}


/* ── PRICING COMPARISON ───────────────────────────────────────────── */
.pricing-compare {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
}

.pricing-item {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    transition: all 0.4s var(--ease);
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

.pricing-item:hover {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.6);
}

.pricing-item--ours {
    border-color: rgba(37, 99, 235, 0.2);
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.06),
        rgba(255, 255, 255, 0.6)
    );
}

.pricing-item--ours:hover {
    border-color: rgba(37, 99, 235, 0.3);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 32px rgba(37, 99, 235, 0.12);
}

.pricing-item__badge {
    position: absolute;
    top: -10px;
    left: 1.5rem;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.85),
        rgba(99, 102, 241, 0.85)
    );
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 2px 8px rgba(37, 99, 235, 0.2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.pricing-item__header h4 {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.pricing-item__price {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.pricing-item__price small {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.pricing-item p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}


/* ── CLIENT CARDS ─────────────────────────────────────────────────── */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1050px;
    margin: 0 auto;
}

.client-card {
    padding: 2.5rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    transition: all 0.4s var(--ease);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

.client-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(37, 99, 235, 0.12);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 32px rgba(0, 0, 0, 0.06);
}

.client-card__icon {
    color: var(--accent);
    margin-bottom: 1.5rem;
    opacity: 0.7;
}

.client-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.client-card__role {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.client-card__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.client-card__list li {
    font-size: 0.875rem;
    color: var(--text-secondary);
    padding-left: 1.5rem;
    position: relative;
}

.client-card__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--success);
    font-weight: 700;
    font-size: 0.8rem;
}

.client-card__motto {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}


/* ── WHY US ───────────────────────────────────────────────────────── */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.why-card {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    transition: all 0.4s var(--ease);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

.why-card:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(37, 99, 235, 0.12);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 32px rgba(0, 0, 0, 0.06);
}

.why-card__number {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.why-card h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.why-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
}


/* ── CTA SECTION ──────────────────────────────────────────────────── */
.section--cta {
    padding: 5rem 0;
}

.cta-content {
    text-align: center;
    max-width: 750px;
    margin: 0 auto;
}

.cta-content__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

.cta-content__desc {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.cta-content__quote {
    font-size: 1rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 2.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.cta-contact {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.cta-contact__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 9999px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.4s var(--ease);
}

.cta-contact__item:hover {
    color: var(--accent);
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(37, 99, 235, 0.15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 2px 8px rgba(37, 99, 235, 0.08);
    transform: translateY(-1px);
}

.cta-contact__icon {
    flex-shrink: 0;
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
    opacity: 0.7;
    transition: opacity 0.3s var(--ease);
}

.cta-contact__item:hover .cta-contact__icon {
    opacity: 1;
}


/* ── FOOTER ───────────────────────────────────────────────────────── */
.footer {
    padding: 4rem 0 0;
    background: #EEF2FF;
}

.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer__brand p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 1rem;
    line-height: 1.6;
}

.footer__col h4 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.footer__col ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer__col a {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.footer__col a:hover {
    color: var(--text-primary);
}

.footer__bottom {
    margin-top: 3rem;
    padding: 1.25rem 0;
    border-top: 1px solid rgba(37, 99, 235, 0.08);
    text-align: center;
}

.footer__bottom p {
    font-size: 0.8rem;
    color: var(--text-secondary);
}


/* ── HERO WAVE SHAPES ─────────────────────────────────────────────── */
.hero-waves {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hero-waves__strokes {
    position: absolute;
    bottom: -5%;
    left: -5%;
    width: 110%;
    height: 100%;
}

.hero-waves__strokes path {
    stroke-linecap: round;
}


/* ── SECTION DECORATIVE STROKES ────────────────── */
.section--has-strokes {
    overflow: hidden;
}

.section-strokes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 450px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.section-strokes__svg {
    position: absolute;
    top: -10%;
    left: -5%;
    width: 110%;
    height: 120%;
}

.section-strokes__svg path {
    stroke-linecap: round;
}

.section--has-strokes > .container {
    position: relative;
    z-index: 1;
}


/* ── WAVE DIVIDERS (colored ↔ white transitions) ────────────────── */
.wave-divider {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 3;
    line-height: 0;
}

.wave-divider--top {
    top: -1px;
}

.wave-divider--bottom {
    bottom: -1px;
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: 80px;
}


/* ── GLOW EFFECTS ─────────────────────────────────────────────────── */
.hero__visual::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
}

.hero__visual {
    position: relative;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.feature-card:hover::before {
    opacity: 1;
}

.problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff7a35, transparent);
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.problem-card {
    position: relative;
}

.problem-card:hover::before {
    opacity: 1;
}


/* ── SCROLL ANIMATIONS ────────────────────────────────────────────── */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ── SYSTEM INFO ──────────────────────────────────────────────────── */
.system-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
}

.system-card {
    padding: 2.5rem 2rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all 0.4s var(--ease);
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

.system-card:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 32px rgba(37, 99, 235, 0.08),
        0 0 20px rgba(37, 99, 235, 0.06);
}

.system-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.system-card:hover::before {
    opacity: 1;
}

.system-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    color: var(--accent);
}

.system-card__icon-img {
    /* Recolor black SVG to blue #2563eb */
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}

.system-card__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.system-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.system-card__desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    text-align: justify;
}

.system-grid--hidden {
    display: none;
    margin-top: 2rem;
}

.system-grid--hidden.open {
    display: grid;
    animation: systemGridReveal 0.5s var(--ease);
}

@keyframes systemGridReveal {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.system-grid__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem auto 0;
    padding: 0.65rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent);
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.04);
}

.system-grid__toggle:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 4px 16px rgba(37, 99, 235, 0.08);
}

.system-grid__toggle-icon {
    transition: transform 0.3s var(--ease);
}

.system-grid__toggle[aria-expanded="true"] .system-grid__toggle-icon {
    transform: rotate(180deg);
}

/* ── INTEGRATION ──────────────────────────────────────────────────── */
.integration-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
}

.integration-card {
    flex: 1;
    padding: 2.5rem 2rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    transition: all 0.4s var(--ease);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

.integration-card:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 32px rgba(0, 0, 0, 0.06);
}

.integration-card--autosoc:hover {
    border-color: rgba(37, 99, 235, 0.2);
}

.integration-card--szbi:hover {
    border-color: rgba(34, 197, 94, 0.2);
}

.integration-card__icon {
    margin-bottom: 0.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 125px;
}

.integration-card__logo {
    height: 35px;
    width: auto;
    margin: 0 auto;
    display: block;
}

.integration-card--szbi .integration-card__logo {
    height: 125px;
}

.integration-card__icon svg {
    color: var(--accent);
}

.integration-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.integration-card__subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    text-align: center;
}

.integration-card__list {
    list-style: none;
    padding: 0;
}

.integration-card__list li {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.35rem 0 0.35rem 1.25rem;
    position: relative;
    line-height: 1.5;
}

.integration-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 14px;
    height: 14px;
    background: url('/icons/ecosystem/check-solid-full.svg') no-repeat center / contain;
    filter: invert(55%) sepia(52%) saturate(5766%) hue-rotate(131deg) brightness(96%) contrast(92%);
}

.integration-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    min-width: 80px;
}

.integration-connector__line {
    flex: 1;
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(37, 99, 235, 0.2) 0px,
        rgba(37, 99, 235, 0.2) 4px,
        transparent 4px,
        transparent 8px
    );
    min-height: 30px;
}

.integration-connector__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 50%;
    color: var(--accent);
    margin: 0.75rem 0;
    flex-shrink: 0;
}

.integration-connector__icon-img {
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}

.integration-connector__label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-align: center;
    max-width: 80px;
    line-height: 1.3;
}

.integration-cta {
    text-align: center;
    margin-top: 3rem;
}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-item {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.4s var(--ease);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 1px 4px rgba(0, 0, 0, 0.04);
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(37, 99, 235, 0.12);
}

.faq-item--open {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(37, 99, 235, 0.15);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 4px 16px rgba(0, 0, 0, 0.06);
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    gap: 1rem;
    transition: color 0.3s var(--ease);
}

.faq-item__question:hover {
    color: var(--accent);
}

.faq-item__chevron {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}

.faq-item--open .faq-item__chevron {
    transform: rotate(180deg);
    color: var(--accent);
}

.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease), padding 0.3s var(--ease);
    padding: 0 1.5rem;
}

.faq-item--open .faq-item__answer {
    max-height: 300px;
    padding: 0 1.5rem 1.5rem;
}

.faq-item__answer p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.7;
    text-align: justify;
}

.faq-item__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    margin-top: 0.75rem;
    text-decoration: none;
    transition: gap 0.3s var(--ease);
}

.faq-item__link:hover {
    gap: 0.6rem;
}


/* ── SUBPAGE (standalone sections) ───────────────────────────────── */
.section--subpage {
    padding-top: calc(var(--nav-height, 72px) + var(--section-py));
    min-height: 80vh;
}

/* ── 404 ERROR PAGE ──────────────────────────────────────────────── */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 8rem 0 4rem;
    background: #EEF2FF;
}

.error-page > .section-strokes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.error-page > .container {
    position: relative;
    z-index: 2;
}

.error-page__content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.error-page__code {
    font-size: clamp(8rem, 20vw, 14rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 1rem;
    background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.7) 0%,
        rgba(99, 102, 241, 0.6) 50%,
        rgba(6, 182, 212, 0.5) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-page__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.error-page__desc {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.error-page__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* ── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .onprem-hero {
        flex-direction: column;
        gap: 2.5rem;
    }

    .onprem-hero__visual {
        flex: none;
        width: 100%;
    }

    .onprem-triangle {
        width: 300px;
        height: 270px;
        margin: 0 auto;
    }

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

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

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .szbi-features {
        grid-template-columns: 1fr;
    }

    .szbi-col--center {
        order: -1;
    }

    .showcase {
        flex-direction: column;
    }

    .showcase__nav {
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        gap: 0.4rem;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    .showcase__item {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
        border-radius: var(--radius-sm);
        padding: 0.65rem 1rem;
        font-size: 0.8rem;
    }

    .showcase__item.active {
        border-left-color: transparent;
        border-bottom-color: var(--accent);
    }

    .showcase__panel {
        padding: 2rem;
    }

    .showcase__content.active {
        flex-direction: column;
    }

    .showcase__mockup {
        width: 100%;
    }

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

    .integration-row {
        flex-direction: column;
        gap: 0;
        max-width: 500px;
        margin: 0 auto;
    }

    .integration-connector {
        flex-direction: row;
        padding: 1rem 0;
        min-width: auto;
    }

    .integration-connector__line {
        flex: 1;
        height: 2px;
        width: auto;
        min-height: auto;
        background: repeating-linear-gradient(
            to right,
            rgba(37, 99, 235, 0.2) 0px,
            rgba(37, 99, 235, 0.2) 4px,
            transparent 4px,
            transparent 8px
        );
    }
}

@media (max-width: 768px) {
    :root {
        --section-py: 2.5rem;
    }

    .nav__links {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        z-index: 999;
        margin-left: 0;
        margin-right: 0;
        padding: 2rem;
    }

    .nav__links.open {
        display: flex;
    }

    .nav__item {
        width: 100%;
        max-width: 280px;
        text-align: center;
    }

    .nav__link {
        font-size: 1.15rem;
        padding: 0.75rem 1rem;
        justify-content: center;
        width: 100%;
    }

    /* Mobile dropdowns: collapsible accordion */
    .nav__dropdown {
        position: static;
        transform: none;
        min-width: auto;
        width: 100%;
        background: rgba(37, 99, 235, 0.04);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        border-radius: var(--radius);
        margin-top: 0.25rem;
        padding: 0;
        box-shadow: none;

        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: max-height 0.4s var(--ease),
                    opacity 0.3s var(--ease),
                    padding 0.3s var(--ease);
    }

    .nav__item--dropdown.open .nav__dropdown {
        max-height: 300px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        padding: 0.5rem;
        transform: none;
    }

    .nav__dropdown-link {
        font-size: 1rem;
        padding: 0.5rem 1rem;
        text-align: center;
    }

    .nav__actions > .btn {
        display: none;
    }

    .nav__hamburger {
        display: flex;
        z-index: 1001;
    }

    .nav__hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 4px);
    }
    .nav__hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .nav__hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -4px);
    }

    .hero > .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero__subtitle {
        margin-left: auto;
        margin-right: auto;
    }

    /* On narrow viewports text-align: justify creates large word gaps,
       especially for Polish text with long words. Override globally. */
    .hero__subtitle,
    .section__desc,
    .problem-card__desc,
    .feature-card__desc,
    .why-card__desc,
    .pricing-table__text {
        text-align: left;
    }

    /* Section titles / hero use <br> for desktop-tuned line breaks; on
       narrow viewports let text wrap naturally. */
    .br--desktop {
        display: none;
    }

    .hero__cta {
        justify-content: center;
    }

    .hero__stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero__visual {
        order: -1;
    }

    .hero__dashboard {
        max-width: 100%;
    }

    .problems,
    .features-grid,
    .pricing-compare,
    .why-grid {
        grid-template-columns: 1fr;
    }

    .onprem-diagram {
        padding: 1.5rem 2rem;
    }

    .showcase__nav {
        gap: 0.3rem;
    }

    .showcase__item .showcase__icon {
        display: none;
    }

    .showcase__panel {
        padding: 1.5rem;
    }

    .showcase__title {
        font-size: 1.25rem;
    }

    .showcase__desc {
        font-size: 0.875rem;
    }

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

    .pipeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1rem;
    }

    .pipeline__step {
        max-width: 100%;
    }

    /* Graph: switch to vertical layout on tablet */
    .graph {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .graph__spine {
        display: none;
    }

    .graph__col--top,
    .graph__col--bottom {
        flex-direction: row;
        min-height: auto;
        gap: 1rem;
        padding: 1rem 0;
        align-self: auto;
        border-left: 2px dashed rgba(37, 99, 235, 0.2);
        margin-left: 22px;
        padding-left: 2rem;
    }

    .graph__col--top .graph__card,
    .graph__col--bottom .graph__card {
        order: 2;
        text-align: left;
        max-width: 100%;
    }

    .graph__col--top .graph__node,
    .graph__col--bottom .graph__node {
        order: 1;
        position: absolute;
        left: -22px;
        width: 40px;
        height: 40px;
    }

    .graph__col--top .graph__dash,
    .graph__col--bottom .graph__dash {
        display: none;
    }

    .graph__col:hover .graph__card,
    .graph__col--bottom:hover .graph__card {
        transform: none;
    }

    .graph__card-icon {
        margin: 0 0 0.5rem;
    }

    .proof .container {
        flex-direction: column;
        text-align: center;
    }

    .proof__logos {
        gap: 1.5rem;
    }

    .footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    .szbi-stats {
        flex-wrap: wrap;
        justify-content: center;
    }

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

    .faq-item__question {
        padding: 1rem 1.25rem;
        font-size: 0.875rem;
    }

    .faq-item__answer {
        padding: 0 1.25rem;
    }

    .faq-item--open .faq-item__answer {
        padding: 0 1.25rem 1.25rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .hero__title {
        font-size: 2rem;
    }

    .section__title {
        font-size: 1.75rem;
    }

    .hero__stats {
        gap: 1rem;
    }

    .hero__stat-divider {
        height: 24px;
    }

    .module-preview__tabs {
        gap: 0.35rem;
    }

    .module-tab {
        padding: 0.4rem 0.9rem;
        font-size: 0.75rem;
    }

    .error-page__code {
        font-size: 6rem;
    }

    .error-page__actions {
        flex-direction: column;
        align-items: center;
    }

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

}

/* ═══════════════════════════════════════════════════════════════════
   Hero — Empty (landing page placeholder)
   ═══════════════════════════════════════════════════════════════════ */
.hero--empty {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero--empty > .container {
    display: block;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   Timeline — Scenario section (nontech page)
   ═══════════════════════════════════════════════════════════════════ */
.timeline {
    position: relative;
    display: grid;
    /* 7 columns: 5 night items (1fr) + break (0.4fr) + morning (1fr) */
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 0.4fr 1fr;
    /* 3 rows: top cards | axis (ring height) | bottom cards */
    grid-template-rows: 1fr 42px 1fr;
    gap: 0 0.5rem;
    align-items: stretch;
}

/* Horizontal gradient line: night blue → morning orange */
.timeline::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    right: 20px;
    height: 3px;
    background: linear-gradient(
        90deg,
        #1e3a5f 0%,
        #2563eb 20%,
        #3b82f6 35%,
        #6366f1 50%,
        #8b5cf6 70%,
        #d97706 90%,
        #f59e0b 100%
    );
    border-radius: 2px;
    z-index: 0;
}

/* Glow layer on the line */
.timeline::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    right: 20px;
    height: 9px;
    background: linear-gradient(
        90deg,
        rgba(30, 58, 95, 0.15) 0%,
        rgba(37, 99, 235, 0.2) 20%,
        rgba(59, 130, 246, 0.18) 35%,
        rgba(99, 102, 241, 0.15) 50%,
        rgba(139, 92, 246, 0.18) 70%,
        rgba(217, 119, 6, 0.2) 90%,
        rgba(245, 158, 11, 0.15) 100%
    );
    border-radius: 6px;
    filter: blur(4px);
    z-index: 0;
}

.timeline__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    /* Default (bottom): spans row 2 (axis) + row 3 (bottom card) */
    grid-row: 2 / 4;
    /* Ring at top of this span, align with axis row */
    justify-content: flex-start;
}

/* Top items: spans row 1 (top card) + row 2 (axis) */
.timeline__item--top {
    grid-row: 1 / 3;
    flex-direction: column-reverse;
    justify-content: flex-start;
}

.timeline__item--top:hover .timeline__card {
    transform: translateY(2px);
}

/* Time-skip spacer between night and morning */
.timeline__break {
    grid-row: 1 / 3;
    grid-column: 6;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 46px; /* above the 42px ring row + small gap */
}

/* Dots + label below the axis (axis stays continuous) */
.timeline__break-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.timeline__break-dots {
    display: flex;
    gap: 6px;
    align-items: center;
}

.timeline__break-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.timeline__break-dots span:nth-child(1) {
    background: #8b5cf6;
    opacity: 0.5;
}

.timeline__break-dots span:nth-child(2) {
    background: #a78bfa;
    opacity: 0.35;
}

.timeline__break-dots span:nth-child(3) {
    background: #d97706;
    opacity: 0.45;
}

.timeline__break-label {
    margin-top: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Morning (last) item — ring visible, stem visible */

/* Ring: outer circle */
.timeline__ring {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

/* Color variants for each ring */
.timeline__item:nth-child(1) .timeline__ring {
    background: rgba(30, 58, 95, 0.12);
    border: 2.5px solid #1e3a5f;
}
.timeline__item:nth-child(2) .timeline__ring {
    background: rgba(37, 99, 235, 0.1);
    border: 2.5px solid #2563eb;
}
.timeline__item:nth-child(3) .timeline__ring {
    background: rgba(59, 130, 246, 0.1);
    border: 2.5px solid #3b82f6;
}
.timeline__item:nth-child(4) .timeline__ring {
    background: rgba(99, 102, 241, 0.1);
    border: 2.5px solid #6366f1;
}
.timeline__item:nth-child(5) .timeline__ring {
    background: rgba(139, 92, 246, 0.1);
    border: 2.5px solid #8b5cf6;
}
.timeline__item:nth-child(7) .timeline__ring {
    background: rgba(217, 119, 6, 0.1);
    border: 2.5px solid #d97706;
}

/* Inner dot */
.timeline__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.timeline__item:nth-child(1) .timeline__dot { background: #1e3a5f; }
.timeline__item:nth-child(2) .timeline__dot { background: #2563eb; }
.timeline__item:nth-child(3) .timeline__dot { background: #3b82f6; }
.timeline__item:nth-child(4) .timeline__dot { background: #6366f1; }
.timeline__item:nth-child(5) .timeline__dot { background: #8b5cf6; }
.timeline__item:nth-child(7) .timeline__dot { background: #d97706; }

/* Hover: lift ring */
.timeline__item:hover .timeline__ring {
    transform: scale(1.15);
}
.timeline__item:nth-child(1):hover .timeline__ring { box-shadow: 0 0 12px rgba(30, 58, 95, 0.3); }
.timeline__item:nth-child(2):hover .timeline__ring { box-shadow: 0 0 12px rgba(37, 99, 235, 0.3); }
.timeline__item:nth-child(3):hover .timeline__ring { box-shadow: 0 0 12px rgba(59, 130, 246, 0.3); }
.timeline__item:nth-child(4):hover .timeline__ring { box-shadow: 0 0 12px rgba(99, 102, 241, 0.3); }
.timeline__item:nth-child(5):hover .timeline__ring { box-shadow: 0 0 12px rgba(139, 92, 246, 0.3); }
.timeline__item:nth-child(7):hover .timeline__ring { box-shadow: 0 0 12px rgba(217, 119, 6, 0.3); }

/* Dashed connector from ring to card */
.timeline__stem {
    width: 2px;
    height: 24px;
    border-left: 2px dashed rgba(0, 0, 0, 0.12);
    margin: 0 auto;
}

/* Card below each ring */
.timeline__card {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius);
    padding: 1rem 0.85rem;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03);
    max-width: 100%;
    width: 100%;
    flex: 1; /* stretch to fill available row space — equal height */
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.timeline__item:hover .timeline__card {
    transform: translateY(-2px);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}

.timeline__time {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.timeline__item:nth-child(1) .timeline__time { color: #1e3a5f; }
.timeline__item:nth-child(2) .timeline__time { color: #2563eb; }
.timeline__item:nth-child(3) .timeline__time { color: #3b82f6; }
.timeline__item:nth-child(4) .timeline__time { color: #6366f1; }
.timeline__item:nth-child(5) .timeline__time { color: #8b5cf6; }
.timeline__item:nth-child(7) .timeline__time { color: #d97706; }

.timeline__card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.timeline__card p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* ── Timeline responsive ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .timeline {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 0;
        padding-left: 2rem;
        gap: 0;
    }

    /* Vertical line */
    .timeline::before {
        top: 20px;
        bottom: 20px;
        left: calc(2rem + 20px);
        right: auto;
        width: 3px;
        height: auto;
        background: linear-gradient(
            180deg,
            #1e3a5f 0%,
            #2563eb 20%,
            #3b82f6 35%,
            #6366f1 50%,
            #8b5cf6 70%,
            #d97706 90%,
            #f59e0b 100%
        );
    }

    .timeline::after {
        top: 20px;
        bottom: 20px;
        left: calc(2rem + 17px);
        right: auto;
        width: 9px;
        height: auto;
        background: linear-gradient(
            180deg,
            rgba(30, 58, 95, 0.15) 0%,
            rgba(37, 99, 235, 0.2) 20%,
            rgba(59, 130, 246, 0.18) 35%,
            rgba(99, 102, 241, 0.15) 50%,
            rgba(139, 92, 246, 0.18) 70%,
            rgba(217, 119, 6, 0.2) 90%,
            rgba(245, 158, 11, 0.15) 100%
        );
    }

    .timeline__item {
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 1rem;
        padding-bottom: 2rem;
    }

    .timeline__ring {
        flex-shrink: 0;
    }

    .timeline__stem {
        display: none;
    }

    .timeline__card {
        max-width: 100%;
    }

    .timeline__item:nth-child(-n+5),
    .timeline__item:nth-child(7) {
        flex: unset;
    }

    .timeline__break {
        flex: unset;
        flex-direction: row;
        padding-top: 0;
        padding-left: 0;
        padding-bottom: 1rem;
        gap: 0.75rem;
    }

    .timeline__break-inner {
        flex-direction: column;
        padding: 6px 0;
        width: 42px;
        justify-content: center;
    }

    .timeline__break-dots {
        flex-direction: column;
        gap: 4px;
    }

    .timeline__break-label {
        margin-top: 0;
    }

    .timeline__item:last-child .timeline__card {
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .timeline {
        padding-left: 1rem;
    }

    .timeline::before {
        left: calc(1rem + 20px);
    }

    .timeline::after {
        left: calc(1rem + 17px);
    }

    .timeline__ring {
        width: 36px;
        height: 36px;
    }

    .timeline__dot {
        width: 12px;
        height: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   PRICING TABLE
   ═══════════════════════════════════════════════════════════════════ */

.pricing-table__wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
}

.pricing-table__grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 640px;
}

/* --- Header row --- */
.pricing-table__corner {
    width: 28%;
    background: transparent;
}

.pricing-table__plan {
    width: 24%;
    padding: 1.75rem 1rem 1.25rem;
    text-align: center;
    vertical-align: bottom;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 2px solid rgba(37, 99, 235, 0.1);
    position: relative;
}

.pricing-table__plan:first-of-type {
    border-radius: var(--radius-lg) 0 0 0;
}

.pricing-table__plan:last-child {
    border-radius: 0 var(--radius-lg) 0 0;
}

.pricing-table__plan--weak {
    opacity: 0.7;
}

.pricing-table__plan--featured {
    background: rgba(37, 99, 235, 0.06);
    border-bottom-color: var(--blue);
    box-shadow: inset 0 2px 0 var(--blue);
}

.pricing-table__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--blue);
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.25);
    padding: 3px 10px;
    border-radius: 9999px;
    margin-bottom: 0.5rem;
}

.pricing-table__plan-name {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.pricing-table__plan-desc {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* --- Body rows --- */
.pricing-table__grid tbody tr {
    transition: background 0.2s ease;
}

.pricing-table__grid tbody tr:hover {
    background: rgba(37, 99, 235, 0.03);
}

.pricing-table__grid tbody tr:nth-child(even) {
    background: rgba(238, 242, 255, 0.4);
}

.pricing-table__grid tbody tr:nth-child(even):hover {
    background: rgba(37, 99, 235, 0.06);
}

.pricing-table__feature {
    padding: 0.85rem 1.25rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pricing-table__value {
    padding: 0.85rem 1rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-left: 1px solid rgba(0, 0, 0, 0.04);
}

.pricing-table__value--featured {
    background: rgba(37, 99, 235, 0.04);
}

.pricing-table__check {
    color: #16a34a;
    font-weight: 700;
    font-size: 1.1rem;
}

.pricing-table__cross {
    color: #d1d5db;
    font-weight: 500;
    font-size: 1.1rem;
}

.pricing-table__text {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.82rem;
}

.pricing-table__text--strong {
    color: var(--blue);
    font-weight: 600;
}

/* --- Footer / CTA row --- */
.pricing-table__cta-cell {
    padding: 1.5rem 1rem;
    text-align: center;
    border-left: 1px solid rgba(0, 0, 0, 0.04);
}

.pricing-table__cta-cell--featured {
    background: rgba(37, 99, 235, 0.04);
}

.btn--sm {
    padding: 0.55rem 1.25rem;
    font-size: 0.82rem;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .pricing-table__corner {
        width: auto;
        min-width: 140px;
    }

    .pricing-table__plan {
        padding: 1.25rem 0.75rem 1rem;
    }

    .pricing-table__plan-name {
        font-size: 1rem;
    }

    .pricing-table__feature {
        padding: 0.75rem 0.75rem;
        font-size: 0.8rem;
    }

    .pricing-table__value {
        padding: 0.75rem 0.5rem;
        font-size: 0.8rem;
    }

    .pricing-table__text {
        font-size: 0.75rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   CHECKLIST (NIS2 / Compliance)
   ═══════════════════════════════════════════════════════════════════ */

.checklist__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.checklist__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.checklist__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.checklist__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.checklist__icon-img {
    width: 24px;
    height: 24px;
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}

.checklist__content {
    flex: 1;
    min-width: 0;
}

.checklist__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.checklist__desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .checklist__columns {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .checklist__item {
        padding: 1rem;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   SZBI MANAGER — page-specific components
   ════════════════════════════════════════════════════════════════════════════ */

/* ── PROBLEMS — 3-card variant (centered) ───────────────────────── */
.problems--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px) {
    .problems--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .problems--three {
        grid-template-columns: 1fr;
    }
}

/* ── HERO LAPTOP ────────────────────────────────────────────────── */
/* Single pre-rendered mockup (laptop chassis + dashboard baked into one PNG).
   Aspect ratio matches /images/laptop_img/laptop-screen_new.png (1672×941). */
.hero__laptop {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    aspect-ratio: 1672 / 941;
}

.hero__laptop-frame {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12));
}

@media (max-width: 1024px) {
    .hero__laptop {
        max-width: 660px;
    }
}

/* ── PDCA CYCLE ─────────────────────────────────────────────────── */
.pdca {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 4rem;
    align-items: center;
    margin-top: 1rem;
}

.pdca__cycle {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto;
}

.pdca__svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pdca__quadrant {
    stroke-dasharray: 4 7;
    opacity: 0.4;
    transition:
        opacity 0.45s var(--ease),
        stroke-width 0.45s var(--ease),
        stroke-dasharray 0.45s var(--ease);
}

.pdca__quadrant--plan { stroke: #2563eb; }
.pdca__quadrant--do   { stroke: #10b981; }
.pdca__quadrant--check{ stroke: #f59e0b; }
.pdca__quadrant--act  { stroke: #8b5cf6; }

.pdca__quadrant-label {
    fill: var(--text-muted);
    opacity: 0.55;
    transition:
        fill 0.4s var(--ease),
        opacity 0.4s var(--ease),
        font-size 0.4s var(--ease);
}

.pdca__center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    place-items: center;
    row-gap: 0.4rem;
    text-align: center;
    pointer-events: none;
}

.pdca__center-label {
    grid-area: 1 / 1;
    font-size: 2.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent), #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    line-height: 1.1;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.35s var(--ease),
        transform 0.35s var(--ease);
}

.pdca__center-label--default {
    opacity: 1;
    transform: translateY(0);
}

.pdca__center-label--plan  { background: linear-gradient(135deg, #2563eb, #4f46e5); -webkit-background-clip: text; background-clip: text; }
.pdca__center-label--do    { background: linear-gradient(135deg, #10b981, #06b6d4); -webkit-background-clip: text; background-clip: text; }
.pdca__center-label--check { background: linear-gradient(135deg, #f59e0b, #ea580c); -webkit-background-clip: text; background-clip: text; }
.pdca__center-label--act   { background: linear-gradient(135deg, #8b5cf6, #a855f7); -webkit-background-clip: text; background-clip: text; }

.pdca__center-sub {
    grid-area: 2 / 1;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: color 0.4s var(--ease);
}

/* Arrow overlays — hidden by default, revealed on phase-card hover */
.pdca__arrow {
    opacity: 0;
    transition:
        opacity 0.45s var(--ease),
        filter 0.45s var(--ease);
    pointer-events: none;
}

/* Phase hover/focus → big-circle response (uses :has(), works for touch via tabindex) */
.pdca__phase {
    cursor: pointer;
}

.pdca__phase:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-lg);
}

.pdca:has(.pdca__phase--plan:is(:hover, :focus-within))  .pdca__quadrant--plan,
.pdca:has(.pdca__phase--do:is(:hover, :focus-within))    .pdca__quadrant--do,
.pdca:has(.pdca__phase--check:is(:hover, :focus-within)) .pdca__quadrant--check,
.pdca:has(.pdca__phase--act:is(:hover, :focus-within))   .pdca__quadrant--act {
    opacity: 0;
}

.pdca:has(.pdca__phase--plan:is(:hover, :focus-within))  .pdca__arrow--plan,
.pdca:has(.pdca__phase--do:is(:hover, :focus-within))    .pdca__arrow--do,
.pdca:has(.pdca__phase--check:is(:hover, :focus-within)) .pdca__arrow--check,
.pdca:has(.pdca__phase--act:is(:hover, :focus-within))   .pdca__arrow--act {
    opacity: 1;
    filter: drop-shadow(0 0 10px currentColor);
}

.pdca:has(.pdca__phase--plan:is(:hover, :focus-within))  .pdca__quadrant-label--plan,
.pdca:has(.pdca__phase--do:is(:hover, :focus-within))    .pdca__quadrant-label--do,
.pdca:has(.pdca__phase--check:is(:hover, :focus-within)) .pdca__quadrant-label--check,
.pdca:has(.pdca__phase--act:is(:hover, :focus-within))   .pdca__quadrant-label--act {
    opacity: 1;
    font-size: 18px;
}

.pdca:has(.pdca__phase--plan:is(:hover, :focus-within))  .pdca__quadrant-label--plan  { fill: #2563eb; }
.pdca:has(.pdca__phase--do:is(:hover, :focus-within))    .pdca__quadrant-label--do    { fill: #10b981; }
.pdca:has(.pdca__phase--check:is(:hover, :focus-within)) .pdca__quadrant-label--check { fill: #f59e0b; }
.pdca:has(.pdca__phase--act:is(:hover, :focus-within))   .pdca__quadrant-label--act   { fill: #8b5cf6; }

.pdca:has(.pdca__phase:is(:hover, :focus-within)) .pdca__center-label--default {
    opacity: 0;
    transform: translateY(-6px);
}

.pdca:has(.pdca__phase--plan:is(:hover, :focus-within))  .pdca__center-label--plan,
.pdca:has(.pdca__phase--do:is(:hover, :focus-within))    .pdca__center-label--do,
.pdca:has(.pdca__phase--check:is(:hover, :focus-within)) .pdca__center-label--check,
.pdca:has(.pdca__phase--act:is(:hover, :focus-within))   .pdca__center-label--act {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .pdca__quadrant,
    .pdca__center-label,
    .pdca__quadrant-label {
        transition: none;
    }
}

.pdca__phases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.pdca__phase {
    position: relative;
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 4px 16px rgba(37, 99, 235, 0.05);
    transition: all 0.4s var(--ease);
}

.pdca__phase:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 8px 24px rgba(37, 99, 235, 0.10);
}

.pdca__phase-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.65rem;
}

.pdca__phase-letter {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #6366f1);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 4px 12px rgba(37, 99, 235, 0.25);
}

.pdca__phase-icon {
    width: 22px;
    height: 22px;
    display: block;
    filter: brightness(0) invert(1);
}

.pdca__phase--do .pdca__phase-letter {
    background: linear-gradient(135deg, #10b981, #06b6d4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 4px 12px rgba(16, 185, 129, 0.28);
}

.pdca__phase--check .pdca__phase-letter {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 4px 12px rgba(245, 158, 11, 0.28);
}

.pdca__phase--act .pdca__phase-letter {
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 4px 12px rgba(139, 92, 246, 0.28);
}

.pdca__phase-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.pdca__phase-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 0.85rem;
}

.pdca__phase-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pdca__phase-list li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.pdca__phase-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}

@media (max-width: 1024px) {
    .pdca {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .pdca__cycle {
        width: 240px;
        height: 240px;
    }
    .pdca__center-label {
        font-size: 1.75rem;
    }
}

@media (max-width: 640px) {
    .pdca__phases {
        grid-template-columns: 1fr;
    }
}

/* ── KPI GRID ───────────────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 1rem;
}

.kpi-card {
    position: relative;
    padding: 1.5rem 1.5rem 1.35rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 4px 16px rgba(37, 99, 235, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: all 0.4s var(--ease);
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 24px rgba(37, 99, 235, 0.10);
}

.kpi-card__label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.kpi-card__value-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.kpi-card__value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1;
}

.kpi-card__ring {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    aspect-ratio: 1;
}

.kpi-card__ring svg {
    width: 100%;
    height: 100%;
}

.kpi-card__delta {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
}

.kpi-card__delta--down {
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
}

.kpi-card__delta--up {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.1);
}

.kpi-card__meta {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.kpi-card__meta--good {
    color: #16a34a;
    font-weight: 600;
}

.kpi-card__meta--warn {
    color: #ea580c;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ── AUDIENCE / KLIENCI ─────────────────────────────────────────── */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    max-width: 1060px;
    margin: 0 auto;
}

.audience-card {
    position: relative;
    padding: 2.25rem 2.25rem 2rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 6px 20px rgba(37, 99, 235, 0.06);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: all 0.4s var(--ease);
}

.audience-card:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 10px 28px rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.2);
}

.audience-card__head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(37, 99, 235, 0.08);
}

.audience-card__icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-default);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(99, 102, 241, 0.10));
    color: var(--accent);
    border: 1px solid rgba(37, 99, 235, 0.18);
}

.audience-card__icon-img {
    width: 34px;
    height: 34px;
    display: block;
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}

.audience-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
    line-height: 1.25;
}

.audience-card__role {
    font-size: 0.92rem;
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
}

.audience-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.audience-card__list li {
    position: relative;
    padding-left: 2rem;
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.audience-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #6366f1);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.audience-card__list li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 0.55rem;
    width: 10px;
    height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

.audience-card__list strong {
    color: var(--text-primary);
    font-weight: 700;
}

.audience-card__motto {
    margin: 0;
    padding: 1rem 1.1rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(99, 102, 241, 0.04));
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-default) var(--radius-default) 0;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.55;
    font-weight: 500;
}

@media (max-width: 768px) {
    .audience-grid {
        grid-template-columns: 1fr;
    }
    .audience-card {
        padding: 1.75rem;
    }
    .audience-card__title {
        font-size: 1.25rem;
    }
}

/* ── ECOSYSTEM FLOW ─────────────────────────────────────────────── */
.ecosystem-flow {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 1rem 0;
}

.ecosystem-step {
    flex: 1;
    min-width: 130px;
    max-width: 180px;
    padding: 1.5rem 1rem;
    text-align: center;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        0 4px 12px rgba(37, 99, 235, 0.05);
    transition: all 0.4s var(--ease);
}

.ecosystem-step:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 8px 20px rgba(37, 99, 235, 0.10);
}

.ecosystem-step__icon {
    width: 56px;
    height: 56px;
    aspect-ratio: 1;
    margin: 0 auto 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-default);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(99, 102, 241, 0.06));
    border: 1px solid rgba(37, 99, 235, 0.12);
    color: var(--accent);
}

.ecosystem-step__icon img {
    max-width: 32px;
    max-height: 32px;
    width: auto;
    height: auto;
}

.ecosystem-step__icon--autosoc,
.ecosystem-step__icon--szbi {
    background: #ffffff;
    padding: 0.5rem;
}

.ecosystem-step__logo {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 32px;
    object-fit: contain;
}

.ecosystem-step__icon--szbi .ecosystem-step__logo {
    max-height: 36px;
}

.ecosystem-step__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.3rem;
}

.ecosystem-step__desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.ecosystem-arrow {
    display: inline-flex;
    align-items: center;
    color: rgba(37, 99, 235, 0.45);
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .ecosystem-flow {
        gap: 0.75rem;
    }
    .ecosystem-arrow {
        transform: rotate(90deg);
    }
    .ecosystem-step {
        min-width: 200px;
    }
}

/* ── CTA BANNER (gradient hero CTA) ─────────────────────────────── */
.section--cta {
    padding: 0;
    background: transparent;
}

.cta-banner {
    position: relative;
    padding: 4rem 0 4.5rem;
    overflow: hidden;
}

.cta-banner__bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #4f46e5 100%);
    z-index: 0;
    overflow: hidden;
}

.cta-banner__bg::before,
.cta-banner__bg::after {
    content: "";
    position: absolute;
    width: 70%;
    height: 200%;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
    will-change: transform, opacity;
}

.cta-banner__bg::before {
    top: -60%;
    left: -20%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.85) 0%, rgba(6, 182, 212, 0.45) 45%, transparent 70%);
    animation: ctaGlowA 14s ease-in-out infinite alternate;
}

.cta-banner__bg::after {
    bottom: -60%;
    right: -25%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.75) 0%, rgba(37, 99, 235, 0.4) 50%, transparent 75%);
    animation: ctaGlowB 18s ease-in-out infinite alternate;
}

@keyframes ctaGlowA {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.45; }
    33%  { transform: translate3d(8%, -6%, 0) scale(1.1); opacity: 0.65; }
    66%  { transform: translate3d(-6%, 4%, 0) scale(0.95); opacity: 0.5; }
    100% { transform: translate3d(12%, 8%, 0) scale(1.15); opacity: 0.7; }
}

@keyframes ctaGlowB {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.45; }
    40%  { transform: translate3d(-10%, 6%, 0) scale(1.18); opacity: 0.7; }
    70%  { transform: translate3d(6%, -8%, 0) scale(0.92); opacity: 0.5; }
    100% { transform: translate3d(-14%, -4%, 0) scale(1.08); opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
    .cta-banner__bg::before,
    .cta-banner__bg::after {
        animation: none;
    }
}

.cta-banner > .container {
    position: relative;
    z-index: 1;
}

.cta-banner .cta-content {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    color: #ffffff;
}

.cta-banner .cta-content__title {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 1rem;
}

.cta-banner .cta-content__desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0 auto 1.5rem;
    max-width: 560px;
}

.cta-banner .cta-content__quote {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
    padding: 0.85rem 1.5rem;
    border-left: 3px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 var(--radius-default) var(--radius-default) 0;
    max-width: 540px;
    margin: 0 auto 2rem;
    text-align: left;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.cta-banner .btn--primary {
    background: rgba(255, 255, 255, 0.95);
    color: var(--accent);
    border-color: rgba(255, 255, 255, 1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        0 4px 14px rgba(0, 0, 0, 0.15);
}

.cta-banner .btn--primary:hover {
    background: #ffffff;
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 22px rgba(0, 0, 0, 0.20);
}

.cta-banner .btn--outline {
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cta-banner .btn--outline:hover {
    background: rgba(255, 255, 255, 0.20);
    border-color: rgba(255, 255, 255, 0.55);
    color: #ffffff;
}

.cta-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    text-decoration: none;
    margin-bottom: 2rem;
    transition: color 0.3s var(--ease);
}

.cta-pdf:hover {
    color: #ffffff;
}

.cta-banner .cta-contact {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.cta-banner .cta-contact__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s var(--ease);
}

.cta-banner .cta-contact__item:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.cta-banner .cta-contact__icon {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

/* ── FOOTER SOCIAL ──────────────────────────────────────────────── */
.footer__social {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.08);
    color: var(--accent);
    border: 1px solid rgba(37, 99, 235, 0.15);
    text-decoration: none;
    transition: all 0.3s var(--ease);
}

.footer__social-link:hover {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    transform: translateY(-1px);
}

.footer__social-icon {
    display: block;
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
    transition: filter 0.3s var(--ease);
}

.footer__social-link:hover .footer__social-icon {
    filter: brightness(0) invert(1);
}

/* ════════════════════════════════════════════════════════════════════
   FIRMA — /firma page components
   ════════════════════════════════════════════════════════════════════ */

/* ── HERO (firma 2-col with image) ─────────────────────────────────── */
.hero--firma > .container {
    align-items: center;
    gap: 3.5rem;
}

.hero--firma .hero__content {
    flex: 1 1 50%;
    text-align: left;
    max-width: 560px;
}

.hero--firma .hero__cta {
    justify-content: flex-start;
}

.hero__visual--firma {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__photo {
    position: relative;
    width: 100%;
    max-width: 580px;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 20px 50px -10px rgba(15, 23, 42, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    background: linear-gradient(135deg, #0f172a, #1e293b);
}

.hero__photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero__photo--podejscie {
    aspect-ratio: 4 / 3;
    max-width: 100%;
}

@media (max-width: 1024px) {
    .hero--firma > .container {
        flex-direction: column;
        text-align: center;
    }
    .hero--firma .hero__content {
        max-width: 100%;
        text-align: center;
    }
    .hero--firma .hero__cta {
        justify-content: center;
    }
}

/* ── METRICS STRIP ─────────────────────────────────────────────────── */
.section--metrics {
    padding: 0.5rem 0 1rem;
    background: var(--bg-primary);
}

.metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.metric {
    text-align: center;
    padding: 0.75rem 1rem;
}

.metric__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent-glow);
    color: var(--accent);
    margin-bottom: 1rem;
    border: 1px solid rgba(37, 99, 235, 0.12);
}

.metric__value {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.metric__label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    margin-bottom: 0.4rem;
}

.metric__sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.45;
}

@media (max-width: 768px) {
    .metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .metric {
        padding: 1rem 0.5rem;
    }
}

/* ── SPLIT 2-COLUMN LAYOUT ─────────────────────────────────────────── */
.split-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 4rem;
    align-items: start;
}

.split-2col--reverse {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.split-2col--team {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    align-items: center;
}

.split-2col__text {
    max-width: 480px;
}

.split-2col__text .section__tag {
    margin-bottom: 1rem;
}

.split-2col__divider {
    height: 2px;
    width: 56px;
    background: var(--accent);
    border-radius: 2px;
    margin: 0 0 1.5rem;
}

.split-2col__desc {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-top: 0.5rem;
}

.split-2col__media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section__title--left {
    text-align: left;
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .split-2col,
    .split-2col--reverse,
    .split-2col--team {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .split-2col--reverse .split-2col__media {
        order: -1;
    }
    .split-2col__text {
        max-width: 100%;
    }
    .section__title--left {
        text-align: left;
    }
}

/* ── 2x2 ICON BLOCKS (Kim jesteśmy) ────────────────────────────────── */
.features-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

.feature-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feature-block__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    aspect-ratio: 1;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--accent);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
        0 6px 18px -8px rgba(37, 99, 235, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
}

.feature-block__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    line-height: 1.35;
    margin: 0;
}

.feature-block__desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 640px) {
    .features-2x2 {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ── APPROACH CHECKLIST (Nasze podejście) ──────────────────────────── */
.approach-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.approach-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.approach-item__check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    color: #ffffff;
    box-shadow: 0 4px 10px -2px rgba(37, 99, 235, 0.45);
}

.approach-item__title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0 0 0.25rem;
    line-height: 1.35;
}

.approach-item__desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ── TEAM CARDS ────────────────────────────────────────────────────── */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.team-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow:
        0 6px 20px -10px rgba(15, 23, 42, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.team-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 28px -12px rgba(15, 23, 42, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.team-card__avatar {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 6px 14px -6px rgba(15, 23, 42, 0.3);
}

.team-card__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.team-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.team-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0;
    line-height: 1.3;
}

.team-card__role {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    margin: 0;
}

.team-card__desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0.4rem 0 0.5rem;
}

.team-card__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    aspect-ratio: 1;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--accent);
    margin-top: auto;
    transition: all 0.3s var(--ease);
}

.team-card__social:hover {
    background: var(--accent);
}

.team-card__social img {
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
    transition: filter 0.3s var(--ease);
}

.team-card__social:hover img {
    filter: brightness(0) invert(1);
}

.team-cta {
    text-align: center;
    margin-top: 2rem;
}

@media (max-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
}

/* ── ECOSYSTEM (Nasz ekosystem) ────────────────────────────────────── */
.ecosystem {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: stretch;
    margin: 2.5rem 0 1.5rem;
}

.ecosystem__product {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 1.75rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    box-shadow:
        0 8px 24px -10px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
}

.ecosystem__product--autosoc {
    border-top: 3px solid #2563eb;
}

.ecosystem__product--szbi {
    border-top: 3px solid #10b981;
}

.ecosystem__product-head {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

.ecosystem__product-logo {
    height: 28px;
    width: auto;
    display: block;
}

.ecosystem__product-logo--szbi {
    height: 36px;
}

.ecosystem__product-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ecosystem__product-list li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.ecosystem__product-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.ecosystem__product--szbi .ecosystem__product-list li::before {
    background: #10b981;
}

.ecosystem__flow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
    min-height: 130px;
}

.ecosystem__flow-line {
    position: absolute;
    inset: auto 0 auto 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 80px;
    pointer-events: none;
    z-index: 0;
}

.ecosystem__nodes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

.ecosystem__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.ecosystem__node-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffffff;
    color: var(--accent);
    border: 1.5px solid rgba(37, 99, 235, 0.25);
    box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.15);
    transition: all 0.3s var(--ease);
}

.ecosystem__node:hover .ecosystem__node-circle {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -6px rgba(37, 99, 235, 0.3);
}

.ecosystem__node-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.ecosystem__caption {
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-top: 1.5rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px) {
    .ecosystem {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    .ecosystem__flow {
        padding: 1.5rem 0;
    }
    .ecosystem__flow-line {
        display: none;
    }
    .ecosystem__nodes {
        grid-template-columns: repeat(5, auto);
        justify-content: center;
        gap: 0.75rem;
    }
}

@media (max-width: 640px) {
    .ecosystem__nodes {
        grid-template-columns: repeat(3, 1fr);
    }
    .ecosystem__node-circle {
        width: 42px;
        height: 42px;
    }
    .ecosystem__node-label {
        font-size: 0.75rem;
    }
}

/* ── FOR-WHOM (Dla kogo jesteśmy) ──────────────────────────────────── */
.for-whom {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.for-whom__intro .section__tag {
    margin-bottom: 1rem;
}

.for-whom__intro .section__title {
    margin-bottom: 1.25rem;
}

.for-whom__lead {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0 0 1rem;
}

.for-whom__checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.for-whom__checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.97rem;
    line-height: 1.5;
}

.for-whom__check {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.10);
    color: var(--accent);
    margin-top: 1px;
}

.for-whom__accent {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.4rem;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 12px;
    align-items: flex-start;
}

.for-whom__accent-icon {
    flex-shrink: 0;
    color: var(--accent);
}

.for-whom__accent-body h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 0.4rem;
    line-height: 1.4;
}

.for-whom__accent-body p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.for-whom__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

/* Audience card variant for /firma */
.audience-card--firma {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1.4rem;
}

.audience-card__badge {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(37, 99, 235, 0.10);
    border-radius: 6px;
    margin-bottom: 0.85rem;
}

.audience-card__badge--biznes {
    color: #047857;
    background: rgba(16, 185, 129, 0.10);
}

.audience-card--firma .audience-card__title {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 1rem;
}

.audience-card__list--simple {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
    z-index: 1;
}

.audience-card__list--simple li {
    position: relative;
    padding-left: 1.4rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.audience-card__list--simple li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.audience-card--biznes .audience-card__list--simple li::before {
    background: #10b981;
}

.audience-card--firma .audience-card__list--simple li::after {
    content: none;
}

.audience-card__art {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    pointer-events: none;
    line-height: 0;
}

.for-whom__statement {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.12);
}

.for-whom__statement-icon {
    flex-shrink: 0;
    color: var(--accent);
}

.for-whom__statement-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
    margin: 0 0 0.4rem;
    line-height: 1.4;
}

.for-whom__statement-body p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 1024px) {
    .for-whom {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .for-whom__cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .for-whom__cards {
        grid-template-columns: 1fr;
    }
    .for-whom__statement {
        flex-direction: column;
        text-align: left;
        padding: 1.25rem;
    }
}

/* ── CTA FIRMA (horizontal gradient banner) ────────────────────────── */
.cta-firma {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem 2.5rem;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #4f46e5 100%);
    color: #ffffff;
    box-shadow: 0 20px 50px -12px rgba(37, 99, 235, 0.35);
}

.cta-firma__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 10% 100%, rgba(99, 102, 241, 0.4) 0%, transparent 60%);
}

.cta-firma__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    aspect-ratio: 1;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    position: relative;
    z-index: 1;
}

.cta-firma__text {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.cta-firma__title {
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    color: #ffffff;
}

.cta-firma__desc {
    font-size: 0.97rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    max-width: 560px;
}

.cta-firma__actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* White button variants for dark gradient backgrounds */
.btn--white {
    background: #ffffff;
    color: var(--accent);
    border: 1px solid #ffffff;
    box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.25);
}

.btn--white:hover {
    background: #f0f4ff;
    color: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.3);
}

.btn--white::before {
    background: rgba(37, 99, 235, 0.08);
}

.btn--outline-white {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.btn--outline-white:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-1px);
}

.btn--outline-white::before {
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 1024px) {
    .cta-firma {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2rem 1.5rem;
        gap: 1.25rem;
    }
    .cta-firma__icon {
        margin: 0 auto;
        width: 72px;
        height: 72px;
    }
    .cta-firma__desc {
        margin: 0 auto;
    }
    .cta-firma__actions {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .cta-firma__actions {
        flex-direction: column;
    }
    .cta-firma__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── FIRMA FOOTER (5 columns + dual logos) ─────────────────────────── */
.footer__grid--firma {
    grid-template-columns: 1.6fr repeat(4, 1fr);
}

.footer__brand-logos {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.footer__brand-logos .nav__logo-img--secondary {
    height: 32px;
}

.footer__grid--firma .footer__social {
    margin-top: 0.85rem;
}

@media (max-width: 1024px) {
    .footer__grid--firma {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer__grid--firma .footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .footer__grid--firma {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer__grid--firma .footer__brand {
        grid-column: 1 / -1;
    }
}

/* ── NAV active state ──────────────────────────────────────────────── */
.nav__link--active {
    color: var(--accent) !important;
    font-weight: 600;
}


/* ── FIRMA — additional refinements ────────────────────────────────── */

/* Vertical center the 4 feature blocks against the text column (Kim jesteśmy) */
.split-2col--centered {
    align-items: center;
}

/* Stack two paragraphs in the same text column with comfortable spacing */
.split-2col__text .split-2col__desc + .split-2col__desc {
    margin-top: 1rem;
}

/* For-whom callouts — uniform 2-col grid below the audience cards */
.for-whom__callouts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.for-whom__callout {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    box-shadow:
        0 6px 18px -10px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    align-items: flex-start;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.for-whom__callout:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 24px -10px rgba(15, 23, 42, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.for-whom__callout-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    aspect-ratio: 1;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.10);
    color: var(--accent);
}

.for-whom__callout-body {
    min-width: 0;
}

.for-whom__callout-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 0.45rem;
    line-height: 1.4;
}

.for-whom__callout-desc {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .for-whom__callouts {
        grid-template-columns: 1fr;
    }
}

/* CTA section — add bottom spacing so gradient banner doesn't kiss the footer */
.section--cta {
    padding-top: 1rem;
    padding-bottom: 4rem;
}

@media (max-width: 768px) {
    .section--cta {
        padding-bottom: 3rem;
    }
}


/* ── FIRMA — section header tag pulled out of split grid ───────────── */
/* Tag is absolute-positioned so it does NOT participate in layout — has
   no effect on vertical centering of the columns below. Negative top
   pushes it into the section's top-padding zone above the container. */
.section__tag--standalone {
    position: absolute;
    top: -2rem;
    left: 1.5rem;
    z-index: 5;
    margin-bottom: 0;
}

/* Ensure the container hosting a standalone tag is the positioning ancestor,
   so the tag's top:-2rem lands consistently above the container regardless
   of section variant (colored vs white). */
.section .container:has(> .section__tag--standalone) {
    position: relative;
}

/* Tag placed inside a column (e.g. reverse layout) — anchors to the
   column's left edge instead of the container's. */
.split-2col__text--has-tag {
    position: relative;
}

.section__tag--in-column {
    left: 0;
}

@media (max-width: 768px) {
    .section__tag--standalone {
        top: -1.25rem;
    }
}

/* Extra padding for sections that need more breathing room (e.g. Kim) */
.section--spacious {
    padding-top: 7rem;
    padding-bottom: 5rem;
}

@media (max-width: 768px) {
    .section--spacious {
        padding-top: 4.5rem;
        padding-bottom: 3.5rem;
    }
}

/* ── Team section — tighter gap, wider cards ───────────────────────── */
/* Override .split-2col base gap and column ratio for the team layout
   so the cards have more horizontal room and sit closer to the heading. */
.split-2col--team {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 2.2fr);
    gap: 2rem;
}

.team-grid {
    gap: 1rem;
}

/* Team card override — wider, less tall, tighter inner spacing */
.team-card {
    padding: 1rem 1.25rem 1.1rem;
    gap: 1rem;
    align-items: flex-start;
}

.team-card__avatar {
    width: 76px;
    height: 76px;
}

.team-card__name {
    font-size: 1.05rem;
    margin-bottom: 0;
}

.team-card__role {
    font-size: 0.88rem;
    margin-top: 0.1rem;
}

.team-card__desc {
    font-size: 0.9rem;
    margin: 0.55rem 0 0.75rem;
    line-height: 1.5;
}

/* Group of 3 social icons (web, linkedin, github) */
.team-card__socials {
    display: flex;
    gap: 0.4rem;
    margin-top: auto;
}

.team-card__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    aspect-ratio: 1;
    border-radius: 6px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--accent);
    transition: all 0.25s var(--ease);
}

.team-card__social:hover {
    background: var(--accent);
    color: #ffffff;
    transform: translateY(-1px);
}

.team-card__social svg {
    display: block;
}

/* Refined "Poznaj cały zespół" — text link with arrow, not a button */
.team-cta {
    text-align: center;
    margin-top: 1.75rem;
}

.team-cta__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    padding: 0.4rem 0;
    border-bottom: 1px solid transparent;
    transition: all 0.25s var(--ease);
}

.team-cta__link:hover {
    border-bottom-color: var(--accent);
    gap: 0.6rem;
}

.team-cta__link svg {
    transition: transform 0.25s var(--ease);
}

.team-cta__link:hover svg {
    transform: translateX(3px);
}

@media (max-width: 1024px) {
    .split-2col--team {
        grid-template-columns: 1fr;
    }
}

/* ── Audience cards — pill-shaped badge + tighter spacing ───────────── */
.audience-card--firma .audience-card__badge {
    padding: 0.3rem 0.85rem;
    font-size: 0.7rem;
    border-radius: 9999px;
    margin-bottom: 0;
    border: 1px solid rgba(37, 99, 235, 0.18);
}

.audience-card--firma .audience-card__badge--biznes {
    border-color: rgba(16, 185, 129, 0.25);
}

.audience-card--firma .audience-card__title {
    margin-bottom: 0.85rem;
}

.audience-card--firma .audience-card__list--simple {
    gap: 0.55rem;
}

/* ── For-whom: give cards more horizontal space ────────────────────── */
.for-whom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2.5rem;
}

/* ── Audience cards — sized to match reference, less tall ─────────── */
.audience-card--firma {
    padding: 1.75rem 1.75rem 2rem;
    min-height: 0;
}

.audience-card--firma .audience-card__title {
    font-size: 1.35rem;
    margin-bottom: 0.85rem;
    margin-top: -0.75rem;
}

.audience-card--firma .audience-card__list--simple {
    gap: 0.55rem;
    max-width: 70%;
}

.audience-card--firma .audience-card__list--simple li {
    font-size: 0.95rem;
}

/* Push the illustration into the very corner, ignore the card padding,
   and clip anything that overflows the rounded card. */
.audience-card--firma {
    overflow: hidden;
}

.audience-card--firma .audience-card__art {
    right: 0;
    bottom: 0;
    opacity: 0.95;
}

.audience-card--firma .audience-card__art-img {
    display: block;
    width: 150px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .for-whom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .audience-card--firma {
        padding: 1.5rem 1.5rem 1.75rem;
    }
    .audience-card--firma .audience-card__list--simple {
        max-width: 100%;
    }
    .audience-card--firma .audience-card__art-img {
        width: 90px;
    }
}

/* Team card socials — colored icon images (web/linkedin/github), ~90% of button height */
.team-card__social-icon {
    display: block;
    width: 22px;
    height: 22px;
    /* Blue tint matching --accent #2563eb */
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
    transition: filter 0.25s var(--ease);
}

.team-card__social:hover .team-card__social-icon {
    /* Pure white on hover */
    filter: brightness(0) invert(1);
}


/* ── FIRMA — recolor file-based icons (img tags) to accent blue ───── */
.feature-block__icon-img,
.for-whom__callout-img,
.metric__icon-img {
    display: block;
    /* Matches --accent #2563eb */
    filter: invert(29%) sepia(93%) saturate(1768%) hue-rotate(213deg) brightness(97%) contrast(93%);
}

.feature-block__icon-img,
.for-whom__callout-img {
    width: 22px;
    height: 22px;
}

.metric__icon-img {
    width: 28px;
    height: 28px;
}


/* ═══════════════════════════════════════════════════════════════════
   DEMO FORM PAGE — /umow-demo
   ═══════════════════════════════════════════════════════════════════ */

/* — Hero variants — */
.hero--demo {
    background: linear-gradient(180deg, #ffffff 0%, #EEF2FF 100%);
    min-height: auto;
    /* Wave-divider--bottom has a 40px white triangle at section bottom.
       Padding-bottom 3rem clears it so content isn't visually clipped. */
    padding-bottom: 3rem;
}

.hero--legal {
    background: linear-gradient(180deg, #ffffff 0%, #EEF2FF 100%);
    min-height: auto;
    padding-bottom: 2.5rem;
}

/* Snug transition: pull the first section closer to the hero. */
.hero--demo + .section,
.hero--legal + .section {
    padding-top: 1.25rem;
}

/* Single-column hero (no right-side visual) — override default 1fr 1fr grid. */
.hero--demo > .container,
.hero--legal > .container {
    display: block;
}

.hero__content--centered {
    text-align: center;
    margin: 0 auto;
    max-width: 920px;
    align-items: center;
}

/* Tighten vertical rhythm inside the centered hero (h1 → subtitle → bullets). */
.hero__content--centered .hero__title {
    margin-bottom: 0.5rem;
}

.hero__content--centered .hero__subtitle {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: 0;
}

.hero__content--centered .hero__bullets {
    margin-top: 1.25rem;
}

.hero__bullets {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-align: left;
    max-width: 560px;
}

.hero__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.55;
}

.hero__bullets li svg {
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 2px;
}

/* Compact metadata badge — fixed in the bottom-right corner of the viewport
   so it stays visible while reading the policy. Has a red dismiss button
   in the top-right corner. Hidden on mobile (low value, takes screen space). */
.legal-meta {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 90;
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: var(--radius);
    padding: 0.85rem 1rem 0.55rem;
    margin: 0;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.legal-meta[hidden] {
    display: none;
}

.legal-meta__close {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    cursor: pointer;
    transition: background 0.15s var(--ease), transform 0.15s var(--ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}

.legal-meta__close::after {
    content: "×";
    color: #ffffff;
    font-size: 10px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s var(--ease);
    font-weight: 700;
    transform: translateY(-0.5px);
}

.legal-meta__close:hover {
    background: #dc2626;
    transform: scale(1.15);
}

.legal-meta__close:hover::after,
.legal-meta__close:focus-visible::after {
    opacity: 1;
}

.legal-meta__close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .legal-meta {
        display: none;
    }
}

.legal-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.legal-meta strong {
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

/* — Form card — */
.form-card {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    box-shadow:
        0 20px 60px rgba(37, 99, 235, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.form-card__header {
    margin-bottom: 1.75rem;
}

.form-card__title {
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}

.form-card__intro {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

.form-required {
    color: var(--danger);
    font-weight: 600;
    margin-left: 1px;
}

/* — Form fields — */
.form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1.25rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group--full {
    grid-column: 1 / -1;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

.form-input {
    width: 100%;
    font-family: var(--font);
    font-size: 0.95rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    /* Only animate visual feedback properties, NOT dimensions — otherwise
       <textarea> resize drag feels laggy because height is transitioning. */
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
    -webkit-appearance: none;
    appearance: none;
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-input:hover {
    border-color: rgba(37, 99, 235, 0.3);
    background: rgba(255, 255, 255, 0.85);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* :user-invalid only triggers after user interaction (blur/submit) — avoids red-on-load for empty required fields. */
.form-input:user-invalid,
.form-input[aria-invalid="true"] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.5;
}

.form-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.4rem;
    cursor: pointer;
}

.form-help {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* — Checkboxes — */
.form-consents {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.25rem;
    background: rgba(238, 242, 255, 0.5);
    border: 1px solid rgba(37, 99, 235, 0.08);
    border-radius: var(--radius-lg);
}

.form-checkbox {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.form-checkbox__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-checkbox__box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 0.2s var(--ease);
    margin-top: 1px;
}

.form-checkbox:hover .form-checkbox__box {
    border-color: var(--accent);
}

.form-checkbox__input:focus-visible + .form-checkbox__box {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.form-checkbox__input:checked + .form-checkbox__box {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

.form-checkbox__text a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.form-checkbox__text a:hover {
    color: var(--accent-dark);
}

/* — Submit & feedback — */
.form-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.form-actions__note {
    font-size: 0.825rem;
    color: var(--text-muted);
    margin: 0;
}

.form-submit {
    min-width: 220px;
    justify-content: center;
}

.form-submit__spinner {
    display: none;
    animation: form-spin 0.7s linear infinite;
}

.form-submit[data-submitting="true"] .form-submit__label,
.form-submit[data-submitting="true"] .form-submit__arrow {
    display: none;
}

.form-submit[data-submitting="true"] .form-submit__spinner {
    display: inline-block;
}

.form-submit[data-submitting="true"] {
    pointer-events: none;
    opacity: 0.85;
}

@keyframes form-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.form-feedback {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    font-size: 0.92rem;
    line-height: 1.5;
}

.form-feedback[hidden] {
    display: none;
}

.form-feedback strong {
    display: block;
    margin-bottom: 2px;
}

.form-feedback--success {
    background: rgba(22, 163, 74, 0.08);
    border: 1px solid rgba(22, 163, 74, 0.25);
    color: #15803d;
}

.form-feedback--error {
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #b91c1c;
}

.form-feedback--error a {
    color: inherit;
    text-decoration: underline;
}

/* — Aside (alternative contact) — */
.form-aside {
    max-width: 880px;
    margin: 1.5rem auto 0;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 2rem;
    text-align: center;
}

.form-aside__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    flex-shrink: 0;
}

.form-aside__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    font-size: 0.9rem;
}

.form-aside__list li {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.form-aside__label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.form-aside a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.form-aside a:hover {
    text-decoration: underline;
}

/* — Next steps — */
.next-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.next-step {
    position: relative;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    box-shadow:
        0 8px 24px rgba(37, 99, 235, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.next-step:hover {
    transform: translateY(-3px);
    box-shadow:
        0 14px 32px rgba(37, 99, 235, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.next-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.85), rgba(99, 102, 241, 0.85));
    color: #ffffff;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.85rem;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);
}

.next-step__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.35;
}

.next-step__desc {
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.55;
}


/* ═══════════════════════════════════════════════════════════════════
   POLITYKA PRYWATNOŚCI — /polityka-prywatnosci
   ═══════════════════════════════════════════════════════════════════ */

.container--narrow {
    max-width: 880px;
}

.legal {
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.7;
}

.legal p {
    margin: 0 0 0.85rem;
}

.legal a:not(.btn) {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal a:not(.btn):hover {
    color: var(--accent-dark);
}

/* Buttons inside legal content keep their primary styling, not text-link styling. */
.legal a.btn {
    text-decoration: none;
}

.legal strong {
    color: var(--text-primary);
}

.legal__toc {
    background: rgba(238, 242, 255, 0.6);
    border: 1px solid rgba(37, 99, 235, 0.1);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 2.5rem;
}

.legal__toc-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 0.85rem;
}

.legal__toc-list {
    columns: 2;
    column-gap: 2rem;
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.92rem;
}

.legal__toc-list li {
    margin-bottom: 0.35rem;
    break-inside: avoid;
}

.legal__toc-list a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
}

.legal__toc-list a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.legal__section {
    margin: 0 0 2.5rem;
    scroll-margin-top: calc(var(--nav-height, 72px) + 1.5rem);
}

.legal__title {
    font-size: clamp(1.2rem, 2.1vw, 1.5rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 1rem;
    line-height: 1.3;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 1.25rem;
}

.legal__section:first-of-type .legal__title {
    border-top: none;
    padding-top: 0;
}

.legal__entity {
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 0.5rem 0 1rem;
}

.legal__entity p {
    margin: 0.25rem 0;
}

.legal__list {
    margin: 0.5rem 0 1rem;
    padding-left: 1.5rem;
}

.legal__list li {
    margin-bottom: 0.5rem;
}

.legal__list--rights li {
    margin-bottom: 0.75rem;
}

.legal__table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1rem 0 1.25rem;
    background: rgba(255, 255, 255, 0.5);
}

.legal__row {
    display: contents;
}

.legal__row > div {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.92rem;
}

.legal__row > div:first-child {
    border-left: none;
}

.legal__row--head > div {
    background: rgba(238, 242, 255, 0.7);
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
}

.legal__row:last-child > div {
    border-bottom: none;
}

.legal__cta {
    margin-top: 3rem;
    padding: 1.75rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(99, 102, 241, 0.06));
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.legal__cta p {
    margin: 0;
    font-weight: 500;
    color: var(--text-primary);
}

.footer__bottom-link {
    color: inherit;
    text-decoration: none;
}

.footer__bottom-link:hover {
    color: var(--accent);
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Demo form & RODO
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .form-card {
        padding: 1.5rem 1.25rem;
        border-radius: var(--radius-lg);
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .form-consents {
        padding: 1rem;
    }

    .form-submit {
        width: 100%;
    }

    .form-aside {
        padding: 1rem 1.25rem;
        gap: 0.5rem;
    }

    .form-aside__list {
        gap: 0.4rem 1.25rem;
    }

    .next-steps {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .hero__bullets {
        margin-left: auto;
        margin-right: auto;
    }

    .legal__toc-list {
        columns: 1;
    }

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

    .legal__row > div {
        border-left: none;
    }

    .legal__row--head > div:last-child {
        border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .legal__cta {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* SZBI Manager screenshots — pelny zrzut, fit bez przyciecia */
.page-szbi .showcase__mockup-body {
    aspect-ratio: auto;
    padding: 0;
    background: #fff;
}
.page-szbi .showcase__mockup-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
}


/* SZBI hero — wiekszy laptop (poszerz prawa kolumne grida) */
.page-szbi .hero > .container { grid-template-columns: 1fr 1.5fr; gap: 2.5rem; }
.page-szbi .hero__laptop { max-width: 1040px; }
@media (max-width: 1024px){
    .page-szbi .hero > .container { grid-template-columns: 1fr; }
    .page-szbi .hero__laptop { max-width: 680px; }
}

/* SZBI — pasek liczb, atuty, mini-CTA */
.szbi-figures{background:#fff;border-bottom:1px solid rgba(37,99,235,.12);padding:1.75rem 0}
.szbi-figures__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 3.5rem}
.szbi-figures__list li{display:flex;flex-direction:column;align-items:center;text-align:center}
.szbi-figures__list strong{font-size:2.1rem;font-weight:800;line-height:1;color:#2563eb}
.szbi-figures__list span{font-size:.9rem;color:#475569;margin-top:.4rem}
.szbi-atuty__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2.5rem}
.szbi-atut{background:#fff;border:1px solid rgba(37,99,235,.12);border-radius:14px;padding:1.75rem;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.szbi-atut h3{margin:0 0 .6rem;font-size:1.15rem;color:#0f172a}
.szbi-atut p{margin:0;color:#475569;line-height:1.6}
.szbi-midcta{padding:2.5rem 0;text-align:center}
@media(max-width:768px){.szbi-atuty__grid{grid-template-columns:1fr}}

/* About — wieksze karty zespolu, zdjecie prostokatne obok (nie kolko) */
.team-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem; max-width: 940px; margin-left:auto; margin-right:auto; }
.team-card{ padding: 1.75rem; gap: 1.5rem; align-items: stretch; }
.team-card__avatar{ width: 138px; height: auto; aspect-ratio: 4/5; border-radius: 14px; box-shadow: 0 8px 18px -8px rgba(15,23,42,.35); }
.team-card__avatar-img{ width:100%; height:100%; object-fit: cover; object-position: top center; border-radius: 14px; }
.team-card__name{ font-size: 1.2rem; }
.team-card__role{ font-size: 0.92rem; }
.team-card__desc{ font-size: 0.92rem; }
@media(max-width:640px){ .team-grid{ grid-template-columns:1fr; } .team-card__avatar{ width:120px; } }

/* O nas — popup (globalny) */
.onas-modal{position:fixed;inset:0;z-index:100000;display:none}
.onas-modal.open{display:block}
.onas-modal__overlay{position:absolute;inset:0;background:rgba(15,23,42,.6);backdrop-filter:blur(3px)}
.onas-modal__box{position:relative;max-width:720px;margin:5vh auto;background:#fff;border-radius:18px;padding:2.5rem;max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.onas-modal__close{position:absolute;top:1rem;right:1rem;width:38px;height:38px;border:none;border-radius:50%;background:#eef2ff;font-size:1.5rem;line-height:1;cursor:pointer;color:#2563eb}
.onas-modal__title{font-size:2rem;margin:.4rem 0 .6rem;color:#0f172a}
.onas-modal__lead{color:#475569;line-height:1.65;margin:0}
.onas-team{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.75rem 0}
.onas-contact{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;border-top:1px solid #e5e7eb;padding-top:1.25rem;font-weight:600;align-items:center}
.onas-contact a{color:#2563eb;text-decoration:none}
@media(max-width:640px){.onas-team{grid-template-columns:1fr}.onas-modal__box{margin:0;border-radius:0;min-height:100vh;max-height:none}}

/* O nas popup — czytelny tekst kart */
.onas-team .team-card{align-items:center}
.onas-team .team-card__body{min-width:0}
.onas-team .team-card__desc{font-size:.9rem;line-height:1.55}

/* O nas popup — odznaki */
.onas-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.25rem 0 0}
.onas-badges span{background:#eef2ff;color:#2563eb;font-weight:600;font-size:.85rem;padding:.4rem .9rem;border-radius:999px}