@property --color-accent {
            syntax: '<color>';
            inherits: true;
            initial-value: #E07A22;
        }
        @property --color-accent-hover {
            syntax: '<color>';
            inherits: true;
            initial-value: #C86616;
        }
        @property --color-accent-soft {
            syntax: '<color>';
            inherits: true;
            initial-value: #FFF7ED;
        }

        :root {
            /* Základní čistá paleta */
            --bg-page: #F8F9FA;
            --bg-surface: #FFFFFF;
            --border-light: #E2E8F0;
            --border-subtle: rgba(15, 23, 42, 0.06);
            --text-dark: #0F172A;
            --text-body: #475569;
            --text-muted: #64748B;

            /* Přesná akcentní paleta (Hřejivý jantarový akcent bez duhy) */
            --color-primary: #0F172A;         /* Slate tmavá pro texty a jemné detaily */
            --color-primary-light: #1E293B;
            --color-accent: #E07A22;          /* Hřejivá energie */
            --color-accent-hover: #C86616;
            --color-accent-soft: #FFF7ED;
            --ambient-glow: rgba(224, 122, 34, 0.08);

            /* Školní banner proměnné (konzistentní sjednocené tóny) */
            --school-banner-bg: #FFFFFF;
            --school-banner-border: #E2E8F0;
            --school-banner-text: #0F172A;
            --school-banner-badge-bg: #FFF7ED;
            --school-banner-badge-text: #C86616;
            --school-banner-shadow: rgba(15, 23, 42, 0.04);

            --radius-sm: 8px;
            --radius-box: 16px;
            --radius-btn: 10px;
            --radius-pill: 9999px;
            --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
            --transition: 0.25s var(--ease-smooth);
        }

        html {
            scroll-behavior: smooth;
        }

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

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-page);
            color: var(--text-dark);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            line-height: 1.55;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        /* Navigační lišta */
        header {
            background-color: var(--bg-surface);
            border-bottom: 2px solid var(--border-light);
            padding: 16px 24px;
            position: static;
        }

        .header-content {
            max-width: 1180px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .brand-link {
            font-size: 1.3rem;
            font-weight: 900;
            letter-spacing: -0.035em;
            color: var(--text-dark);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: opacity 0.25s ease;
        }

        .brand-link:hover {
            opacity: 0.88;
        }

        .brand-icon {
            width: 24px;
            height: 24px;
            stroke: var(--color-accent) !important;
            color: var(--color-accent);
            stroke-width: 2.2;
            flex-shrink: 0;
            transition: transform 0.3s var(--ease-smooth);
        }

        .brand-icon path,
        .gatekeeper-logo path {
            stroke: var(--color-accent) !important;
            transition: stroke 0.6s ease, fill 0.6s ease;
        }

        .brand-icon path[fill]:not([fill="none"]),
        .gatekeeper-logo path[fill]:not([fill="none"]) {
            fill: var(--color-accent) !important;
            transition: fill 0.6s ease;
        }

        .brand-link:hover .brand-icon {
            transform: scale(1.08) rotate(-4deg);
        }

        .brand-link span.accent {
            color: var(--color-accent);
        }

        .brand-pill {
            font-size: 0.725rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background-color: #F1F5F9;
            color: #475569;
            border: 1px solid #E2E8F0;
            padding: 5px 12px;
            border-radius: var(--radius-btn);
        }

        /* Hlavní kontejner */
        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 32px 20px 80px;
        }

        .page-container {
            width: 100%;
            max-width: 960px;
        }

        .page-container:has(.info-page-view) {
            max-width: 1140px;
        }

        /* ========================================================== */
        /* ČISTÝ MODERNÍ HERO BLOK */
        /* ========================================================== */
        /* ========================================================== */
        /* NAKLONĚNÝ DYNAMICKÝ HERO BLOK */
        /* ========================================================== */
        .angled-hero-card {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-box);
            overflow: hidden;
            box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.07), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
            margin-bottom: 40px;
            position: relative;
        }

        /* Horní subtilní akcentní linka */
        .hero-top-strip {
            display: none;
        }

        .hero-split-grid {
            display: grid;
            grid-template-columns: 1.18fr 0.82fr;
            min-height: 430px;
            position: relative;
        }

        /* Levý hlavní blok (čistý temný slate bez záře s dynamickým šikmým řezem doprava) */
        .hero-left-angled {
            background: #0F172A;
            color: #FFFFFF;
            padding: 46px 52px 46px 44px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            z-index: 2;
            clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
            margin-right: -42px;
        }

        .hero-title-angled {
            font-size: 2.15rem;
            font-weight: 850;
            letter-spacing: -0.035em;
            line-height: 1.22;
            margin-bottom: 12px;
            color: #FFFFFF;
        }

        .hero-title-angled span.highlight {
            color: #FB923C;
        }

        .hero-lead-angled {
            font-size: 0.96rem;
            color: #CBD5E1;
            line-height: 1.55;
            margin-bottom: 24px;
            max-width: 440px;
            font-weight: 450;
        }

        .hero-btn-row {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
        }

        .hero-left-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-top: -16px;
        }

        /* Moderní cenový tag - transparentní s ostrými hranami u spodního okraje karty */
        /* PRÉMIOVÝ CENOVÝ TAG S ANIMACÍ PŘEŠKRTNUTÍ A SLEVY */
        .hero-price-tag {
            position: absolute;
            bottom: 14px;
            left: 44px;
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.10);
            border-radius: 4px;
            transition: all 0.25s ease;
            cursor: pointer;
            box-sizing: border-box;
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .hero-price-inner {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .hero-price-subwrap {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .hero-price-dot {
            color: rgba(255, 255, 255, 0.18);
            font-size: 0.85rem;
            line-height: 1;
            user-select: none;
        }

        .hero-price-tag:hover {
            background: transparent;
            border-color: rgba(255, 255, 255, 0.25);
            transform: none;
            box-shadow: none;
        }

        .hero-price-tooltip {
            position: absolute;
            bottom: calc(100% + 9px);
            left: 50%;
            transform: translateX(-50%) translateY(5px) scale(0.97);
            background: #0F172A;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 6px 12px;
            font-size: 11.5px;
            font-weight: 600;
            color: #F8FAFC;
            white-space: nowrap;
            box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.25);
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            will-change: opacity, transform;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s linear;
            z-index: 50;
        }

        .hero-price-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(-3px) rotate(45deg);
            width: 7px;
            height: 7px;
            background: #0F172A;
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }

        .hero-price-tag:hover .hero-price-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0) scale(1);
            transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .price-stage {
            display: inline-flex;
            align-items: baseline;
            gap: 6px;
            line-height: 1;
            position: relative;
        }

        /* Finální nová cena (199 Kč) - zpočátku skrytá, hladce se rozevře a naskočí */
        .price-final-wrap {
            display: inline-flex;
            align-items: baseline;
            max-width: 0;
            opacity: 0;
            overflow: hidden;
            transform: translateX(-4px);
            transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 0.4s ease,
                        transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
            white-space: nowrap;
        }

        .price-final-val {
            font-size: 0.96rem;
            font-weight: 700;
            color: #F8FAFC;
            letter-spacing: -0.01em;
            font-variant-numeric: tabular-nums;
            line-height: 1;
        }

        /* Původní cena (400 Kč) - zpočátku čistá, poté decentně přeškrtnutá a zmenšená */
        .price-origin-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
            transition: all 0.4s ease;
        }

        .price-origin-val {
            font-size: 0.94rem;
            font-weight: 550;
            color: #CBD5E1;
            letter-spacing: -0.01em;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            transition: all 0.4s ease;
        }

        /* Dynamické přeškrtnutí linkou */
        .price-strike-line {
            position: absolute;
            left: -2px;
            right: -2px;
            top: 50%;
            height: 1.5px;
            background: #94A3B8;
            border-radius: 1px;
            transform: scaleX(0);
            transform-origin: left center;
            transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            pointer-events: none;
        }

        /* Normální -50% text v závorce bez agresivního rámečku */
        .price-discount-badge {
            font-size: 0.78rem;
            font-weight: 550;
            color: #94A3B8;
            background: transparent;
            border: none;
            padding: 0;
            border-radius: 0;
            line-height: 1;
            opacity: 0;
            transform: translateX(-3px);
            transition: opacity 0.35s ease, transform 0.35s ease;
            white-space: nowrap;
        }

        /* Popisek ceny a termínu */
        .hero-price-note {
            font-size: 0.73rem;
            color: #64748B;
            font-weight: 500;
            letter-spacing: 0.01em;
            margin-top: 0;
            opacity: 1;
            transition: color 0.3s ease;
            white-space: nowrap;
        }

        /* STAVY PŘI ANIMACI */
        /* Fáze 1: Přeškrtnuto */
        .hero-price-tag.is-slashed .price-strike-line {
            transform: scaleX(1);
        }

        /* Fáze 2: Zlevněno - 400 Kč zešedne a zmenší se, 199 Kč naskočí, (–50 %) se ukáže */
        .hero-price-tag.is-discounted .price-final-wrap {
            max-width: 90px;
            opacity: 1;
            transform: translateX(0);
        }

        .hero-price-tag.is-discounted .price-origin-val {
            font-size: 0.80rem;
            color: #64748B;
            font-weight: 450;
        }

        .hero-price-tag.is-discounted .price-strike-line {
            background: #64748B;
        }

        .hero-price-tag.is-discounted .price-discount-badge {
            opacity: 1;
            transform: translateX(0);
        }

        .hero-price-tag.is-discounted .hero-price-note {
            color: #94A3B8;
        }

        .hero-micro-item svg {
            color: #059669;
            flex-shrink: 0;
        }

        .hero-micro-dot {
            color: #CBD5E1;
            font-size: 0.85rem;
            user-select: none;
        }

        .hero-sublink-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: #94A3B8 !important;
            font-size: 0.835rem;
            font-weight: 600;
            padding: 7px 15px;
            border-radius: 999px;
            text-decoration: none !important;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .hero-sublink-pill svg {
            color: var(--color-accent);
            flex-shrink: 0;
            transition: transform 0.2s ease;
        }

        .hero-sublink-pill .sublink-arrow {
            color: var(--color-accent);
            transition: transform 0.2s ease;
            font-weight: 700;
        }

        .hero-sublink-pill:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.28);
            color: #F8FAFC !important;
            text-decoration: none !important;
            transform: translateY(-1px);
        }

        .hero-sublink-pill:hover svg {
            transform: scale(1.1);
        }

        .hero-sublink-pill:hover .sublink-arrow {
            transform: translateX(3px);
        }

        .btn-diagonal {
            background-color: var(--color-accent);
            color: #FFFFFF;
            font-size: 0.975rem;
            font-weight: 700;
            padding: 13px 26px;
            border-radius: var(--radius-btn);
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: transform 0.32s var(--ease-smooth), box-shadow 0.32s var(--ease-smooth), background-color 0.25s ease;
            text-decoration: none;
            box-shadow: 0 4px 14px rgba(224, 122, 34, 0.35);
            position: relative;
            overflow: hidden;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .btn-diagonal::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -80%;
            width: 50%;
            height: 200%;
            background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.26) 50%, transparent 100%);
            transform: rotate(25deg) translateZ(0);
            pointer-events: none;
            opacity: 0;
            transition: left 0.85s var(--ease-smooth), opacity 0.35s ease;
        }

        .btn-diagonal:hover::after {
            left: 140%;
            opacity: 1;
        }

        .btn-diagonal:hover {
            background-color: var(--color-accent-hover);
            transform: translate3d(0, -2px, 0);
            box-shadow: 0 6px 18px rgba(224, 122, 34, 0.45);
        }

        .btn-diagonal svg {
            width: 17px;
            height: 17px;
            stroke: currentColor;
            transition: transform 0.3s var(--ease-smooth);
        }

        .btn-diagonal:hover svg {
            transform: translate3d(4px, 0, 0);
        }

        /* Pravý blok s ilustrací (světlý, čistý, prostorný) */
        .hero-right-angled {
            background-color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 30px 30px 30px 60px;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        .hero-right-angled img {
            width: 100%;
            max-width: 320px;
            height: auto;
            display: block;
            filter: drop-shadow(0 6px 20px rgba(15, 23, 42, 0.05));
            transform: translate3d(0, 0, 0);
        }

        .hero-bottom-bar {
            background-color: #F8FAFC;
            border-top: 1px solid var(--border-light);
            padding: 14px 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.82rem;
            color: var(--text-body);
            font-weight: 500;
            flex-wrap: wrap;
            gap: 12px;
        }

        .hero-bottom-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: transform 0.28s var(--ease-smooth), color 0.25s ease;
            transform: translate3d(0, 0, 0);
        }

        .hero-bottom-item:hover {
            transform: translate3d(0, -1px, 0);
            color: var(--text-dark);
        }

        .hero-bottom-item span.strong {
            font-weight: 700;
            color: var(--text-dark);
        }

        .hero-bottom-item svg {
            width: 16px;
            height: 16px;
            stroke: var(--color-accent);
            stroke-width: 2.2;
            flex-shrink: 0;
            transition: transform 0.28s var(--ease-smooth);
            transform: translate3d(0, 0, 0);
        }

        .hero-bottom-item:hover svg {
            transform: translate3d(0, 0, 0) scale(1.15);
        }

        .hero-bottom-bar span.strong {
            color: var(--text-dark);
            font-weight: 700;
        }

        /* ========================================================== */
        /* PŘÍBĚHOVÉ KARTY: POZNÁVÁŠ SE V TOM? */
        /* ========================================================== */
        .section-header {
            text-align: center;
            margin-bottom: 32px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, #CBD5E1 25%, #CBD5E1 75%, transparent 100%);
            margin: 68px auto;
            max-width: 860px;
            opacity: 0.6;
        }

        .section-title {
            font-size: 1.55rem;
            font-weight: 900;
            letter-spacing: -0.03em;
            color: var(--text-dark);
            margin-bottom: 8px;
            text-align: center;
        }

        .section-title span.accent-word {
            color: var(--color-accent);
        }

        .section-arrow-down {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--color-accent);
            margin-top: 8px;
        }

        .section-arrow-down svg {
            width: 22px;
            height: 22px;
            stroke: var(--color-accent);
            stroke-width: 2.2;
            animation: bounceArrow 2.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
            will-change: transform;
            transform: translate3d(0, 0, 0);
        }

        @keyframes bounceArrow {
            0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.7; }
            50% { transform: translate3d(0, 6px, 0); opacity: 1; }
        }

        .cards-list {
            display: flex;
            flex-direction: column;
            gap: 22px;
            margin-bottom: 48px;
        }

        .story-row-card {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-box);
            display: grid;
            grid-template-columns: 180px 1fr;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
            transition: border-color 0.3s ease, box-shadow 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth);
            position: relative;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transform: translate3d(0, 0, 0);
            will-change: transform, box-shadow;
            min-height: 136px;
        }

        .story-row-card:hover {
            border-color: #FDBA74;
            transform: translate3d(0, -3px, 0);
            box-shadow: 0 10px 28px rgba(224, 122, 34, 0.09);
        }

        /* Barevný levý pásek s gradientem a jemným rozšířením na hover */
        .story-accent-tab {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 5px;
            background: linear-gradient(180deg, var(--color-accent) 0%, #EA580C 100%);
            transition: width 0.32s var(--ease-smooth);
            will-change: width;
        }

        .story-row-card:hover .story-accent-tab {
            width: 8px;
        }

        .story-img-cell {
            background-color: #F8FAFC;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px 20px;
            border-right: 1px solid var(--border-light);
            position: relative;
        }

        .story-img-cell img {
            max-width: 125px;
            max-height: 82px;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
            position: relative;
            z-index: 1;
            transition: transform 0.45s var(--ease-smooth);
            transform: translate3d(0, 0, 0);
            will-change: transform;
        }

        .story-row-card:hover .story-img-cell img {
            transform: translate3d(0, -2px, 0) scale(1.05);
        }

        .story-text-cell {
            padding: 20px 28px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .story-text-cell h3 {
            font-size: 1.15rem;
            font-weight: 800;
            letter-spacing: -0.015em;
            margin-bottom: 8px;
            color: var(--text-dark);
            line-height: 1.4;
        }

        .story-text-cell h3 span.accent-highlight {
            color: var(--color-accent);
            background-color: var(--color-accent-soft);
            padding: 1px 6px;
            border-radius: 4px;
        }

        .story-text-cell p {
            font-size: 0.9rem;
            color: var(--text-body);
            line-height: 1.6;
        }

        /* ========================================================== */
        /* SEKCE: RYCHLÁ MAPA PROCESU (3 KROKY S IKONAMI)             */
        /* ========================================================== */
        .process-map-box {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-box);
            padding: 36px 32px;
            margin-bottom: 48px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
        }

        .process-header {
            text-align: center;
            max-width: 680px;
            margin: 0 auto 32px auto;
        }

        .process-eyebrow {
            font-size: 0.725rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-accent);
            margin-bottom: 8px;
        }

        /* ========================================================== */
        /* SEKCE: RYCHLÁ MAPA PROCESU (MINIMALISTICKÉ ČTVERCE)        */
        /* ========================================================== */
        .process-map-box {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-box);
            padding: 30px 28px;
            margin-bottom: 48px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
        }

        .process-header {
            text-align: center;
            margin-bottom: 24px;
        }

        .process-title {
            font-size: 1.45rem;
            font-weight: 900;
            letter-spacing: -0.025em;
            color: var(--text-dark);
        }

        .process-flow-grid {
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            gap: 16px;
        }

        .process-step-card {
            background-color: #FFFFFF;
            border: 1.5px solid var(--border-light);
            border-radius: var(--radius-box);
            padding: 24px 20px 22px;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            gap: 16px;
            min-height: 220px;
            position: relative;
            cursor: pointer;
            will-change: transform, box-shadow;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
        }

        .process-step-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
            border-color: #CBD5E1;
        }

        .process-step-card.highlight {
            background: linear-gradient(180deg, #FFFBF5 0%, #FFFFFF 100%);
            border-color: #FDBA74;
            box-shadow: 0 6px 20px rgba(224, 122, 34, 0.07);
        }

        /* ========================================================== */
        /* MAGNETICKÝ / PLOVOUCÍ CURSOR TOOLTIP PRO KROKY PROCESU     */
        /* ========================================================== */
        .process-step-tooltip {
            display: none !important;
        }

        .process-cursor-tooltip {
            position: fixed;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 99999;
            will-change: transform;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s linear;
        }

        .process-cursor-tooltip.visible {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .process-cursor-tooltip-inner {
            width: 250px;
            background: #0F172A;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.45;
            color: #F8FAFC;
            text-align: left;
            box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.25);
            position: relative;
            transform: scale(0.92);
            transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform;
        }

        .process-cursor-tooltip.visible .process-cursor-tooltip-inner {
            transform: scale(1);
        }

        .process-cursor-tooltip-arrow {
            position: absolute;
            top: 14px;
            left: -4px;
            width: 8px;
            height: 8px;
            background: #0F172A;
            border-left: 1px solid rgba(255, 255, 255, 0.2);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            transform: rotate(-45deg);
        }

        .process-cursor-tooltip.flip-x .process-cursor-tooltip-arrow {
            left: auto;
            right: -4px;
            border-left: none;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            border-right: 1px solid rgba(255, 255, 255, 0.2);
            transform: rotate(45deg);
        }

        .process-step-heading {
            font-size: 1rem;
            font-weight: 800;
            color: var(--text-dark);
            letter-spacing: -0.015em;
        }

        .process-illustration-wrap {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 130px;
        }

        .process-illustration-img {
            max-width: 100%;
            height: 108px;
            width: auto;
            object-fit: contain;
            display: block;
            filter: none;
            transition: transform 0.3s var(--ease-smooth);
        }

        .process-illustration-img.img-tall {
            height: 128px;
        }

        .process-step-card:hover .process-illustration-img {
            transform: scale(1.05);
        }

        .process-icon-bold {
            width: 44px;
            height: 44px;
            display: block;
            filter: brightness(0) saturate(100%) invert(56%) sepia(74%) saturate(1637%) hue-rotate(351deg) brightness(94%) contrast(89%);
        }

        .process-arrow-cell {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            flex-shrink: 0;
        }

        .process-arrow-icon {
            width: 22px;
            height: 22px;
            opacity: 0.35;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        /* ========================================================== */
        /* SEKCE: SROVNÁVACÍ KARTY REALITY (BEZ RÁMEČKU, ORANŽOVÉ)    */
        /* ========================================================== */
        .trap-showcase-box {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-box);
            padding: 36px 32px;
            margin-bottom: 48px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
        }

        .trap-header-row {
            margin-bottom: 24px;
        }

        .trap-eyebrow {
            font-size: 0.725rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-accent);
            margin-bottom: 6px;
        }

        .trap-main-title {
            font-size: 1.5rem;
            font-weight: 900;
            letter-spacing: -0.025em;
            color: var(--text-dark);
        }

        .trap-cards-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }

        .trap-comparison-card {
            background-color: #FFFFFF;
            border: 1.5px solid var(--border-light);
            border-radius: var(--radius-box);
            padding: 22px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), border-color 0.25s ease;
        }

        .trap-comparison-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
            border-color: #CBD5E1;
        }

        .trap-card-header {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .trap-card-icon-naked {
            width: 34px;
            height: 34px;
            flex-shrink: 0;
            filter: brightness(0) saturate(100%) invert(56%) sepia(74%) saturate(1637%) hue-rotate(351deg) brightness(94%) contrast(89%);
        }

        .trap-card-quote {
            font-size: 0.98rem;
            font-weight: 800;
            color: var(--text-dark);
            line-height: 1.35;
        }

        .trap-card-body {
            display: flex;
            flex-direction: column;
            gap: 9px;
        }

        .trap-item-wrong {
            background-color: #FEF2F2;
            border: 1px solid #FECACA;
            border-left: 4px solid #DC2626;
            border-radius: var(--radius-btn);
            padding: 10px 13px;
        }

        .trap-label-wrong {
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #991B1B;
            margin-bottom: 3px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .trap-badge-icon {
            width: 14px;
            height: 14px;
            flex-shrink: 0;
            display: inline-block;
        }

        .trap-item-wrong p {
            font-size: 0.84rem;
            color: #7F1D1D;
            line-height: 1.45;
        }

        .trap-item-right {
            background-color: #F0FDF4;
            border: 1px solid #BBF7D0;
            border-left: 4px solid #16A34A;
            border-radius: var(--radius-btn);
            padding: 10px 13px;
        }

        .trap-label-right {
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #166534;
            margin-bottom: 3px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .trap-item-right p {
            font-size: 0.84rem;
            color: #14532D;
            line-height: 1.45;
        }

        /* ========================================================== */
        /* SEKCE: UKÁZKA VÝSTUPU (PREVIEW BANNER S ODKAZEM)           */
        /* ========================================================== */
        .preview-cta-card {
            background-color: #FFFFFF;
            color: var(--text-dark);
            border: 1.5px solid var(--border-light);
            border-radius: var(--radius-box);
            padding: 34px 32px;
            margin-bottom: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
            transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), border-color 0.25s ease;
        }

        .preview-cta-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06);
            border-color: #CBD5E1;
        }

        .preview-cta-card-left {
            display: flex;
            align-items: center;
            gap: 22px;
            flex: 1;
            min-width: 280px;
        }

        .preview-cta-icon-naked {
            width: 44px;
            height: 44px;
            flex-shrink: 0;
            filter: brightness(0) saturate(100%) invert(56%) sepia(74%) saturate(1637%) hue-rotate(351deg) brightness(94%) contrast(89%);
        }

        .preview-cta-content {
            flex: 1;
        }

        .preview-cta-title {
            font-size: 1.45rem;
            font-weight: 900;
            letter-spacing: -0.025em;
            color: var(--text-dark);
            margin-bottom: 6px;
        }

        .preview-cta-desc {
            font-size: 0.92rem;
            color: var(--text-body);
            line-height: 1.55;
            max-width: 620px;
        }

        .preview-cta-action {
            flex-shrink: 0;
        }

        /* ========================================================== */
        /* BLOK UKÁZKY DIAGNOSTICKÉHO VÝSTUPU S MINIATUROU TESTU      */
        /* ========================================================== */
        .preview-showcase-card {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 20px;
            padding: 34px 38px;
            box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.05);
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 38px;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .showcase-bg-decor {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .showcase-decor-svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        .showcase-left {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            z-index: 1;
        }

        .showcase-icon-badge {
            width: auto;
            height: auto;
            background: none;
            border-radius: 0;
            box-shadow: none;
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 12px;
            flex-shrink: 0;
            color: var(--color-accent);
        }

        .showcase-icon-badge svg {
            width: 32px;
            height: 32px;
            color: var(--color-accent);
        }

        .showcase-eyebrow {
            font-size: 11px;
            font-weight: 700;
            color: #E07A22;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        .showcase-heading {
            font-size: 1.5rem;
            font-weight: 850;
            color: #0F172A;
            letter-spacing: -0.025em;
            line-height: 1.25;
            margin: 0 0 12px 0;
        }

        .showcase-description {
            font-size: 0.93rem;
            color: #475569;
            line-height: 1.6;
            margin: 0 0 24px 0;
        }

        .showcase-actions {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            max-width: 320px;
        }

        .showcase-btn {
            width: 100%;
            justify-content: center;
            padding: 13px 22px;
            font-size: 0.95rem;
            font-weight: 700;
        }

        .showcase-note {
            font-size: 11.5px;
            color: #94A3B8;
            font-weight: 500;
            text-align: center;
        }

        /* PRAVÁ STRANA: MINIATURNÍ NÁHLED TESTU S 9 KAPITOLAMI */
        .mini-report-box {
            background: #F8FAFC;
            border: 1.5px solid #E2E8F0;
            border-radius: 16px;
            padding: 18px 20px;
            box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
            text-decoration: none;
            color: inherit;
            display: block;
            cursor: pointer;
            position: relative;
            z-index: 1;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .mini-report-box:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08);
            border-color: #CBD5E1;
        }

        .mini-report-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 10px;
            border-bottom: 1px solid #E2E8F0;
            margin-bottom: 12px;
        }

        .mini-report-header-left {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .mini-report-tag {
            font-size: 10px;
            font-weight: 700;
            color: #E07A22;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .mini-report-title {
            font-size: 13.5px;
            font-weight: 800;
            color: #0F172A;
            line-height: 1.25;
        }

        .mini-report-count {
            font-size: 11.5px;
            font-weight: 700;
            color: #64748B;
            background: none;
            border: none;
            padding: 0;
            white-space: nowrap;
            letter-spacing: 0.02em;
        }

        .mini-chapters-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .mini-chapter-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 6px 10px;
            border-radius: 8px;
            background: #FFFFFF;
            border: 1px solid #E2E8F0;
            transition: all 0.15s ease;
        }

        .mini-chapter-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .mini-chapter-num {
            font-size: 11px;
            font-weight: 800;
            color: #E07A22;
            font-variant-numeric: tabular-nums;
            min-width: 16px;
        }

        .mini-chapter-name {
            font-size: 12px;
            font-weight: 600;
            color: #334155;
            line-height: 1.25;
        }

        .mini-chapter-arrow {
            color: #94A3B8;
            display: flex;
            align-items: center;
            flex-shrink: 0;
            transition: transform 0.15s ease, color 0.15s ease;
        }

        .mini-report-box:hover .mini-chapter-arrow {
            transform: translateX(2px);
            color: #E07A22;
        }

        @media (max-width: 820px) {
            .preview-showcase-card {
                grid-template-columns: 1fr;
                padding: 24px 20px;
                gap: 28px;
            }
            .showcase-bg-decor {
                display: none;
            }
            .showcase-actions {
                max-width: 100%;
            }
        }

        /* ========================================================== */
        /* NOVÁ SEKCE 3: STRATEGIE 3 PŘIHLÁŠEK & SPODNÍ CTA           */
        /* ========================================================== */
        .strategy-bento {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 36px;
        }

        .strategy-slot-card {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 18px;
            padding: 26px 24px 22px;
            position: relative;
            overflow: visible !important;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }

        .strategy-slot-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 32px -4px rgba(15, 23, 42, 0.09);
            border-color: #CBD5E1;
        }

        .strategy-slot-card.slot-card-1 { border-top: 3.5px solid #E07A22; }
        .strategy-slot-card.slot-card-2 { border-top: 3.5px solid #0EA5E9; }
        .strategy-slot-card.slot-card-3 { border-top: 3.5px solid #10B981; }

        /* Plovoucí tematické SVGs vyjíždějící zpod karty při hoveru */
        .slot-float-icons {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 10;
            overflow: visible;
        }

        .float-svg {
            position: absolute;
            opacity: 0;
            transform: translateY(12px) scale(0.6);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
            filter: drop-shadow(0 4px 10px rgba(0,0,0,0.10));
        }

        .strategy-slot-card:hover .float-svg {
            opacity: 1;
        }

        /* 1. Priorita (Ambice): Hvězdy & Raketa */
        .slot-card-1 .float-1 { top: -22px; left: 16px; color: #E07A22; transition-delay: 0.02s; }
        .strategy-slot-card.slot-card-1:hover .float-1 { transform: translateY(-8px) scale(1) rotate(-8deg); }

        .slot-card-1 .float-2 { top: -28px; right: 24px; color: #EA580C; transition-delay: 0.08s; }
        .strategy-slot-card.slot-card-1:hover .float-2 { transform: translateY(-12px) scale(1.1) rotate(12deg); }

        .slot-card-1 .float-3 { bottom: -18px; right: -8px; color: #F59E0B; transition-delay: 0.14s; }
        .strategy-slot-card.slot-card-1:hover .float-3 { transform: translateY(6px) scale(1) rotate(-15deg); }

        /* 2. Priorita (Jistota): Kompas, Terč & Špendlík */
        .slot-card-2 .float-1 { top: -24px; left: 20px; color: #0284C7; transition-delay: 0.02s; }
        .strategy-slot-card.slot-card-2:hover .float-1 { transform: translateY(-8px) scale(1) rotate(6deg); }

        .slot-card-2 .float-2 { top: -28px; right: 20px; color: #0EA5E9; transition-delay: 0.08s; }
        .strategy-slot-card.slot-card-2:hover .float-2 { transform: translateY(-10px) scale(1.15) rotate(-10deg); }

        .slot-card-2 .float-3 { bottom: -18px; right: -8px; color: #38BDF8; transition-delay: 0.14s; }
        .strategy-slot-card.slot-card-2:hover .float-3 { transform: translateY(6px) scale(1) rotate(12deg); }

        /* 3. Priorita (Záchrana): Štít, Kotva & Záchranný kruh */
        .slot-card-3 .float-1 { top: -24px; left: 18px; color: #059669; transition-delay: 0.02s; }
        .strategy-slot-card.slot-card-3:hover .float-1 { transform: translateY(-8px) scale(1) rotate(-10deg); }

        .slot-card-3 .float-2 { top: -28px; right: 22px; color: #10B981; transition-delay: 0.08s; }
        .strategy-slot-card.slot-card-3:hover .float-2 { transform: translateY(-12px) scale(1.15) rotate(8deg); }

        .slot-card-3 .float-3 { bottom: -18px; right: -8px; color: #34D399; transition-delay: 0.14s; }
        .strategy-slot-card.slot-card-3:hover .float-3 { transform: translateY(6px) scale(1) rotate(-8deg); }

        .slot-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }

        .slot-num-badge {
            font-size: 0.78rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            background: none;
            border: none;
            padding: 0;
            display: inline-flex;
            align-items: center;
        }

        .slot-1 { background: none; color: #E07A22; border: none; }
        .slot-2 { background: none; color: #0284C7; border: none; }
        .slot-3 { background: none; color: #059669; border: none; }

        .slot-icon-wrap {
            background: transparent !important;
            border-radius: 0 !important;
            width: auto !important;
            height: auto !important;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .slot-icon-wrap svg {
            width: 34px !important;
            height: 34px !important;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .strategy-slot-card:hover .slot-icon-wrap svg {
            transform: scale(1.18) rotate(4deg);
        }
        .slot-icon-1 { background: transparent !important; color: #E07A22; }
        .slot-icon-2 { background: transparent !important; color: #0284C7; }
        .slot-icon-3 { background: transparent !important; color: #059669; }

        .strategy-slot-card h4 {
            font-size: 1.15rem;
            font-weight: 850;
            color: #0F172A;
            margin: 0 0 8px 0;
            letter-spacing: -0.015em;
        }

        .strategy-slot-card p {
            font-size: 0.88rem;
            color: #475569;
            line-height: 1.55;
            margin: 0 0 16px 0;
            flex-grow: 1;
        }

        .slot-example-tag {
            font-size: 0.78rem;
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 8px;
            padding: 8px 12px;
            color: #334155;
            font-weight: 600;
            line-height: 1.4;
        }
        .slot-example-tag span {
            color: #94A3B8;
            font-weight: 500;
            display: block;
            font-size: 0.70rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 2px;
        }

        /* ========================================================== */
        /* CIK-CAK ŽIVÁ OCHUTNÁVKA 3 TYPŮ OTÁZEK TESTU (1:1 MAKETY)   */
        /* ========================================================== */
        .sim-zigzag-section {
            margin-top: 36px;
            margin-bottom: 36px;
        }

        .sim-eyebrow {
            font-size: 11px;
            font-weight: 800;
            color: #E07A22;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            text-align: center;
            margin-bottom: 6px;
        }

        .sim-zigzag-list {
            display: flex;
            flex-direction: column;
            gap: 36px;
            margin-top: 28px;
        }

        .sim-zigzag-row {
            display: grid;
            grid-template-columns: 1.25fr 0.75fr;
            gap: 36px;
            align-items: center;
        }

        .sim-zigzag-row.row-right {
            grid-template-columns: 0.75fr 1.25fr;
        }

        .sim-question-mock {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            position: relative;
            background: #FFFFFF !important;
            border: 1.5px solid #E2E8F0 !important;
            border-top: 4px solid var(--color-accent) !important;
            border-radius: 18px !important;
            padding: 30px 28px 24px !important;
            box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.06) !important;
        }

        .sim-question-mock .q-meta-tag {
            font-size: 0.725rem !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 0.06em !important;
            color: #E07A22 !important;
            margin-bottom: 10px !important;
            display: block !important;
        }

        .sim-question-mock .q-title {
            font-size: 1.25rem !important;
            font-weight: 850 !important;
            line-height: 1.35 !important;
            letter-spacing: -0.02em !important;
            margin-bottom: 8px !important;
            color: #0F172A !important;
        }

        .sim-question-mock .q-desc {
            font-size: 0.90rem !important;
            color: #475569 !important;
            margin-bottom: 22px !important;
            line-height: 1.5 !important;
        }

        .sim-question-mock .option-btn {
            opacity: 1 !important;
            visibility: visible !important;
            background-color: #FFFFFF !important;
            border: 2px solid #E2E8F0 !important;
            color: #0F172A !important;
        }

        .sim-question-mock .option-btn.selected {
            border-color: #E07A22 !important;
            background: #FFF7ED !important;
            box-shadow: 0 0 0 3px rgba(224, 122, 34, 0.12) !important;
        }

        .sim-question-mock .option-letter {
            color: #475569 !important;
            font-weight: 800 !important;
            border-color: #CBD5E1 !important;
        }

        .sim-question-mock .option-btn.selected .option-letter {
            background: #E07A22 !important;
            color: #FFFFFF !important;
            border-color: #E07A22 !important;
        }

        .sim-question-mock .option-text {
            color: #1E293B !important;
            font-size: 0.88rem !important;
            line-height: 1.45 !important;
            font-weight: 500 !important;
        }

        .sim-question-mock .option-btn.selected .option-text {
            color: #0F172A !important;
            font-weight: 600 !important;
        }

        .sim-row-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .sim-row-header {
            display: flex;
            align-items: baseline;
            gap: 10px;
        }

        .sim-row-num {
            font-size: 1.75rem;
            font-weight: 950;
            color: #E07A22;
            letter-spacing: -0.04em;
            line-height: 1;
        }

        .sim-row-badge {
            font-size: 0.76rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #E07A22;
            padding: 0;
            background: transparent;
            border: none;
            display: inline-block;
        }

        .sim-row-info h4 {
            font-size: 1.45rem;
            font-weight: 850;
            color: #0F172A;
            line-height: 1.25;
            margin: 0;
            letter-spacing: -0.02em;
        }

        .sim-row-info p {
            font-size: 0.94rem;
            color: #475569;
            line-height: 1.6;
            margin: 0;
        }

        .sim-mock-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 14px;
        }

        .sim-mock-note {
            font-size: 0.74rem;
            font-weight: 600;
            color: #475569;
            letter-spacing: 0.01em;
            line-height: 1.35;
            margin: 0;
            flex: 1;
            min-width: 0;
        }

        .sim-mock-nav .btn-nav {
            flex-shrink: 0;
            white-space: nowrap;
        }

        @media (max-width: 540px) {
            .sim-mock-note {
                font-size: 0.70rem;
                line-height: 1.25;
            }
            .sim-mock-nav .btn-nav {
                padding: 8px 14px !important;
                font-size: 0.84rem !important;
            }
        }

        .sim-row-feature {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.84rem;
            font-weight: 600;
            color: #334155;
            margin-top: 2px;
            padding: 0;
            background: transparent;
            border: none;
            border-radius: 0;
        }

        @media (max-width: 860px) {
            .sim-zigzag-row, .sim-zigzag-row.row-right, .sim-zigzag-row.row-left {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }
            .sim-zigzag-row .sim-row-info {
                order: 1 !important;
            }
            .sim-zigzag-row .sim-question-mock {
                order: 2 !important;
            }
        }

        .bottom-cta-banner {
            background-color: #FFFFFF;
            border: 1px solid var(--border-light);
            border-top: 3px solid var(--color-accent);
            border-radius: var(--radius-box);
            padding: 32px 36px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
            transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth);
            transform: translate3d(0, 0, 0);
        }

        .bottom-cta-banner:hover {
            transform: translate3d(0, -2px, 0);
            box-shadow: 0 14px 36px rgba(15, 23, 42, 0.07);
        }

        @media (max-width: 780px) {
            .process-flow-grid {
                flex-direction: column;
                gap: 12px;
            }
            .process-arrow-cell {
                transform: rotate(90deg);
                margin: 6px auto;
            }
            .trap-cards-grid, .preview-grid, .strategy-bento {
                grid-template-columns: 1fr;
            }
            .process-map-box, .trap-showcase-box, .preview-showcase, .bottom-cta-banner {
                padding: 22px 18px;
            }
        }

        /* ========================================= */
        /* TESTOVACÍ ROZHRANÍ (TEST VIEW) */
        /* ========================================= */
        #testView {
            display: none;
            overflow-x: clip;
            position: relative;
        }

        #testView::before {
            display: none !important;
        }

        #reportView {
            display: none;
        }

        .school-active-banner {
            display: none;
            margin-bottom: 14px;
            background: var(--school-banner-bg);
            border: 1.5px solid var(--school-banner-border);
            border-radius: 12px;
            padding: 10px 16px;
            font-size: 0.86rem;
            color: var(--school-banner-text);
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            box-shadow: 0 2px 8px var(--school-banner-shadow);
            transition: background 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                        border-color 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                        color 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                        box-shadow 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .school-banner-left {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .school-banner-icon {
            flex-shrink: 0;
            color: var(--school-banner-badge-bg);
            transition: color 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .school-banner-badge {
            font-size: 0.74rem;
            font-weight: 800;
            background: var(--school-banner-badge-bg);
            color: var(--school-banner-badge-text);
            padding: 3px 10px;
            border-radius: 99px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: background 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                        color 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .school-banner-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .btn-leave-school {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            font-size: 0.74rem;
            font-weight: 700;
            color: var(--school-banner-text);
            background: rgba(255, 255, 255, 0.75);
            border: 1px solid var(--school-banner-border);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.15s ease;
            white-space: nowrap;
        }

        .btn-leave-school:hover {
            color: #DC2626;
            background: #FEF2F2;
            border-color: #FCA5A5;
        }

        .progress-header {
            margin-bottom: 20px;
        }

        .progress-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.825rem;
            color: var(--text-muted);
            font-weight: 600;
            margin-bottom: 8px;
        }

        .progress-meta strong {
            color: var(--color-accent);
        }

        .btn-test-top-restart {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #FFFFFF;
            border: 1px solid #CBD5E1;
            color: #475569;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 5px 12px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            user-select: none;
        }

        .btn-test-top-restart:hover {
            background: #FFF1F2;
            border-color: #FDA4AF;
            color: #BE123C;
            box-shadow: 0 2px 6px rgba(225, 29, 72, 0.12);
        }

        .btn-test-top-restart svg {
            color: #64748B;
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
        }

        .btn-test-top-restart:hover svg {
            color: #E11D48;
            transform: rotate(-180deg);
        }

        .btn-test-top-restart:active {
            transform: scale(0.97);
        }

        .progress-track {
            height: 6px;
            background-color: var(--border-light);
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background-color: var(--color-accent);
            width: 0%;
            transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1), background-color 1s ease;
        }

        .question-box {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-box);
            padding: 38px 34px;
            box-shadow: 0 4px 18px rgba(0,0,0,0.03);
            border-top: 4px solid var(--color-accent);
            transition: border-top-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
        }

        /* SMETANOVĚ HLADKÉ PŘECHODOVÉ ANIMACE OTÁZEK */
        @keyframes qSlideNext {
            0% {
                opacity: 0;
                transform: translate3d(0, 8px, 0);
            }
            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes qSlidePrev {
            0% {
                opacity: 0;
                transform: translate3d(0, -8px, 0);
            }
            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        @keyframes optionCascadeIn {
            0% {
                opacity: 0;
                transform: translate3d(0, 8px, 0);
            }
            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        .q-content-body {
            will-change: transform, opacity;
        }

        .q-content-body.q-slide-next {
            animation: qSlideNext 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        .q-content-body.q-slide-prev {
            animation: qSlidePrev 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        .q-content-body.q-slide-next .options-group .option-btn,
        .q-content-body.q-slide-prev .options-group .option-btn {
            animation: optionCascadeIn 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
        }

        .q-content-body.q-slide-next .options-group .option-btn:nth-child(1),
        .q-content-body.q-slide-prev .options-group .option-btn:nth-child(1) { animation-delay: 0.03s; }

        .q-content-body.q-slide-next .options-group .option-btn:nth-child(2),
        .q-content-body.q-slide-prev .options-group .option-btn:nth-child(2) { animation-delay: 0.06s; }

        .q-content-body.q-slide-next .options-group .option-btn:nth-child(3),
        .q-content-body.q-slide-prev .options-group .option-btn:nth-child(3) { animation-delay: 0.09s; }

        .q-content-body.q-slide-next .options-group .option-btn:nth-child(4),
        .q-content-body.q-slide-prev .options-group .option-btn:nth-child(4) { animation-delay: 0.12s; }

        .q-content-body.q-slide-next .options-group .option-btn:nth-child(5),
        .q-content-body.q-slide-prev .options-group .option-btn:nth-child(5) { animation-delay: 0.15s; }

        @media (prefers-reduced-motion: reduce) {
            .q-content-body.q-slide-next,
            .q-content-body.q-slide-prev,
            .q-content-body.q-slide-next .options-group .option-btn,
            .q-content-body.q-slide-prev .options-group .option-btn {
                animation: none !important;
                transform: none !important;
            }
        }

        .q-meta-tag {
            font-size: 0.725rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--color-accent);
            margin-bottom: 10px;
            transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .q-title {
            font-size: 1.3rem;
            font-weight: 800;
            line-height: 1.35;
            letter-spacing: -0.02em;
            margin-bottom: 8px;
            color: var(--text-dark);
        }

        .q-desc {
            font-size: 0.9rem;
            color: var(--text-body);
            margin-bottom: 26px;
            line-height: 1.5;
        }

        /* 4. STYLOVÉ KARTY ODPOVĚDÍ (A, B, C, D) - MAXIMÁLNĚ USPOKOJIVÝ A HAPTICKÝ ZÁŽITEK */
        .options-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 30px;
        }

        .option-btn {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 20px;
            background-color: #FFFFFF;
            border: 2px solid #E2E8F0;
            border-radius: 16px;
            cursor: pointer;
            user-select: none;
            text-align: left;
            box-shadow: 0 2px 5px rgba(15, 23, 42, 0.03), 0 1px 2px rgba(15, 23, 42, 0.02);
            position: relative;
            outline: none;
            -webkit-tap-highlight-color: transparent;
            transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                        background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
            will-change: transform, box-shadow, border-color;
        }

        .option-btn:focus {
            outline: none;
        }

        .option-btn:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px var(--color-accent-soft), 0 0 0 1.5px var(--color-accent);
        }

        .option-btn:hover {
            background-color: var(--color-accent-soft);
            border-color: var(--color-accent);
            transform: translateY(-2px);
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(15, 23, 42, 0.04);
        }

        .option-btn:active {
            transform: translateY(1.5px) scale(0.985);
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
            transition-duration: 0.04s;
        }

        @keyframes optionJuicySelect {
            0% {
                transform: scale(0.975);
                box-shadow: 0 0 0 0 transparent;
            }
            45% {
                transform: scale(1.022) translateY(-3px);
                box-shadow: 0 0 0 4px var(--color-accent-soft), 0 8px 20px var(--ambient-glow);
            }
            100% {
                transform: scale(1) translateY(-2px);
                box-shadow: 0 0 0 3px var(--color-accent-soft), 0 8px 24px var(--ambient-glow);
            }
        }

        .option-btn.selected {
            animation: optionJuicySelect 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
            background: linear-gradient(135deg, #FFFDFB 0%, var(--color-accent-soft) 100%);
            border-color: var(--color-accent);
            box-shadow: 0 0 0 3px var(--color-accent-soft), 0 8px 24px var(--ambient-glow);
            transform: translateY(-2px);
        }

        .option-letter {
            width: 34px;
            height: 34px;
            border: 2px solid #CBD5E1;
            border-radius: 10px;
            font-size: 0.85rem;
            font-weight: 800;
            color: #475569;
            background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            aspect-ratio: 1 / 1;
            transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
        }

        .option-btn:hover .option-letter {
            border-color: var(--color-accent);
            color: var(--color-accent);
            background: var(--color-accent-soft);
            transform: scale(1.05);
        }

        @keyframes letterSpringPop {
            0% { transform: scale(0.9); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        .option-btn.selected .option-letter {
            animation: letterSpringPop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
            background: var(--color-accent);
            color: #FFFFFF;
            border-color: var(--color-accent);
            box-shadow: 0 4px 14px var(--ambient-glow);
        }

        .option-label {
            flex: 1;
            font-size: 0.95rem;
            color: #1E293B;
            line-height: 1.48;
            font-weight: 500;
            word-break: break-word;
            overflow-wrap: break-word;
            transition: color 0.18s ease;
        }

        .option-btn.selected .option-label {
            color: #0F172A;
            font-weight: 700;
        }

        .option-indicator {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid #CBD5E1;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            aspect-ratio: 1 / 1;
            transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
            background: #FFFFFF;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
        }

        .option-btn:hover .option-indicator {
            border-color: var(--color-accent);
            transform: scale(1.05);
        }

        @keyframes indicatorSpringPop {
            0% { transform: scale(0.8); }
            55% { transform: scale(1.22); box-shadow: 0 0 0 5px var(--color-accent-soft); }
            100% { transform: scale(1); box-shadow: 0 3px 10px var(--ambient-glow); }
        }

        .option-btn.selected .option-indicator {
            animation: indicatorSpringPop 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both;
            border-color: var(--color-accent);
            background: var(--color-accent);
        }

        @keyframes checkmarkSnap {
            0% {
                opacity: 0;
                transform: scale(0) rotate(-35deg);
            }
            65% {
                opacity: 1;
                transform: scale(1.35) rotate(10deg);
            }
            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
        }

        .option-check-icon {
            width: 14px;
            height: 14px;
            stroke: #FFFFFF;
            stroke-width: 3.2;
            opacity: 0;
            transform: scale(0.5);
            transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .option-btn.selected .option-check-icon {
            animation: checkmarkSnap 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        /* ========================================================== */
        /* DYNAMICKÉ POČÍTADLO HLOUBKY ODPOVĚDI (DEPTH METER)         */
        /* ========================================================== */
        .depth-meter-card {
            background: #FFFFFF;
            border: 1px solid #E2E8F0;
            border-radius: 14px;
            padding: 14px 18px;
            margin-bottom: 14px;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
        }

        .depth-meter-card:hover,
        .depth-meter-card.is-typing {
            border-color: #CBD5E1;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
        }

        .depth-meter-card.stage-deep {
            border-color: #D8B4FE;
            box-shadow: 0 4px 16px rgba(147, 51, 234, 0.08);
        }

        .depth-meter-card.stage-exotic {
            background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
            border-color: #38BDF8;
            box-shadow: 0 10px 30px rgba(56, 189, 248, 0.22);
        }

        .depth-meter-header {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 10px;
            width: 100%;
        }

        .depth-meter-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
            min-height: 26px;
        }

        .depth-meter-title-wrap {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .depth-badge-anchor {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            min-width: 0;
            flex-shrink: 0;
        }

        .depth-meter-pulse-icon {
            width: auto !important;
            height: auto !important;
            border-radius: 0 !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent !important;
            color: #64748B;
            border: none !important;
            transition: color 0.25s ease;
            flex-shrink: 0;
        }

        .depth-meter-card.is-typing .depth-meter-pulse-icon {
            background: transparent !important;
            color: var(--color-accent);
            border: none !important;
        }

        .depth-meter-card.stage-deep .depth-meter-pulse-icon {
            background: transparent !important;
            color: #7C3AED;
            border: none !important;
        }

        .depth-meter-card.stage-exotic .depth-meter-pulse-icon {
            background: transparent !important;
            color: #0284C7;
            border: none !important;
        }

        .depth-meter-title {
            font-size: 0.82rem;
            font-weight: 800;
            color: #1E293B;
            letter-spacing: -0.01em;
            white-space: nowrap;
        }

        .depth-stage-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.69rem;
            font-weight: 800;
            padding: 3px 10px;
            border-radius: 9999px;
            letter-spacing: 0.02em;
            white-space: nowrap;
            opacity: 1;
            transform: scale(1);
            transform-origin: center right;
            transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.2s ease, transform 0.2s ease;
        }

        .depth-stage-badge.is-hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: scale(0.92);
        }

        .depth-stage-badge.stage-empty {
            background: #F1F5F9;
            color: #64748B;
            border: 1px solid #E2E8F0;
        }

        .depth-stage-badge.stage-starting {
            background: var(--color-accent-soft);
            color: var(--color-accent);
            border: 1px solid var(--color-accent);
        }

        .depth-stage-badge.stage-good {
            background: #EFF6FF;
            color: #1D4ED8;
            border: 1px solid #BFDBFE;
        }

        .depth-stage-badge.stage-deep {
            background: #FAF5FF;
            color: #6B21A8;
            border: 1px solid #E9D5FF;
            box-shadow: 0 0 10px rgba(168, 85, 247, 0.25);
            animation: depthBadgePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        .depth-stage-badge.stage-exotic {
            background: #E0F2FE;
            color: #0284C7;
            border: 1px solid #7DD3FC;
            box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
            animation: depthBadgePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        .depth-stage-badge.stage-vulgar {
            background: #FEE2E2;
            color: #B91C1C;
            border: 1px solid #FCA5A5;
        }

        @keyframes depthBadgePop {
            0% { transform: scale(0.95); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .depth-meter-counter-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 0.77rem;
            width: 100%;
        }

        .depth-char-count {
            font-weight: 800;
            color: #0F172A;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
        }

        .depth-target-hint {
            color: #64748B;
            font-weight: 600;
            white-space: nowrap;
            text-align: right;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Progress track & bar */
        .depth-bar-track {
            width: 100%;
            height: 8px;
            background: #F1F5F9;
            border-radius: 9999px;
            position: relative;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .depth-bar-fill {
            height: 100%;
            border-radius: 9999px;
            transition: width 0.3s cubic-bezier(0.34, 1.2, 0.64, 1), background 0.4s ease;
        }

        .depth-bar-fill.stage-empty {
            background: #CBD5E1;
        }

        .depth-bar-fill.stage-starting {
            background: var(--color-accent);
        }

        .depth-bar-fill.stage-good {
            background: linear-gradient(90deg, var(--color-accent) 0%, #2563EB 100%);
        }

        .depth-bar-fill.stage-deep {
            background: linear-gradient(90deg, #2563EB 0%, #7C3AED 50%, #A855F7 100%);
            box-shadow: 0 0 10px rgba(124, 58, 237, 0.35);
        }

        .depth-bar-fill.stage-exotic {
            background: linear-gradient(90deg, #7C3AED 0%, #06B6D4 50%, #38BDF8 100%);
            box-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
        }

        .depth-bar-fill.stage-vulgar {
            background: #EF4444;
        }

        .depth-meter-hint-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            font-size: 0.78rem;
            line-height: 1.45;
        }

        .depth-hint-icon {
            color: #64748B;
            margin-top: 1px;
            flex-shrink: 0;
        }

        .depth-hint-text {
            color: #475569;
            font-weight: 500;
            transition: color 0.25s ease;
        }

        .depth-meter-card.stage-deep .depth-hint-text {
            color: #6B21A8;
            font-weight: 600;
        }

        .depth-meter-card.stage-exotic .depth-hint-text {
            color: #0369A1;
            font-weight: 600;
        }

        .depth-meter-card.stage-vulgar .depth-hint-text {
            color: #B91C1C;
            font-weight: 700;
        }

        .text-input.has-depth-deep {
            border-color: #9333EA;
            box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.18);
        }

        .text-input.has-depth-exotic {
            border-color: #0284C7;
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
        }

        .text-input.has-depth-vulgar {
            border-color: #EF4444;
            background-color: #FEF2F2;
            box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
        }

        /* Textarea pro psací otázky */
        .textarea-box {
            margin-bottom: 30px;
        }

        .text-input {
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            min-height: 140px;
            padding: 16px;
            font-family: inherit;
            font-size: 0.925rem;
            color: var(--text-dark);
            background-color: #FAFAFC;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-btn);
            outline: none;
            resize: vertical;
            line-height: 1.5;
            transition: border-color var(--transition);
        }

        .text-input:focus {
            background-color: #FFFFFF;
            border-color: var(--color-accent);
            box-shadow: 0 0 0 1.5px var(--color-accent);
        }

        /* ========================================================== */
        /* WIDGET: ROZDĚLENÍ 10 ZLATÝCH KORUNEK (GAMIFIKOVANÁ MISE)   */
        /* ========================================================== */
        .coins-widget {
            margin-bottom: 30px;
            border: 1.5px solid #FCD34D;
            border-radius: 18px;
            background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF8 100%);
            padding: 24px;
            box-shadow: 0 12px 36px rgba(217, 119, 6, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03);
            position: relative;
        }

        /* Královská pokladnice (Treasury Vault) */
        .coins-treasury-card {
            background: linear-gradient(135deg, #18181B 0%, #27272A 55%, #1F1913 100%);
            border: 1.5px solid #F59E0B;
            border-radius: 14px;
            padding: 18px 20px;
            margin-bottom: 24px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(245, 158, 11, 0.15);
            position: relative;
            overflow: hidden;
            transition: box-shadow 0.4s ease, border-color 0.4s ease;
        }

        .coins-treasury-card::before {
            display: none !important;
            content: none !important;
        }

        .coins-treasury-card.treasury-win-anim {
            animation: treasuryWinPulse 1.2s ease-out;
            border-color: #FDE047;
        }

        @keyframes treasuryWinPulse {
            0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
            50% { box-shadow: 0 0 0 18px rgba(245, 158, 11, 0); }
            100% { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); }
        }

        .treasury-top-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
            flex-wrap: wrap;
            gap: 12px;
        }

        .treasury-title-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .treasury-icon-orb {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #FFFFFF;
            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
            flex-shrink: 0;
        }

        .treasury-title-text {
            font-size: 0.95rem;
            font-weight: 800;
            color: #FFFFFF;
            letter-spacing: -0.01em;
            line-height: 1.2;
        }

        .treasury-sub-text {
            font-size: 0.75rem;
            color: #A1A1AA;
            margin-top: 2px;
            font-weight: 500;
        }

        .treasury-actions-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn-treasury-reset {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #D4D4D8;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 5px 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .btn-treasury-reset:hover {
            background: rgba(255, 255, 255, 0.18);
            color: #FFFFFF;
            border-color: rgba(255, 255, 255, 0.3);
        }

        .treasury-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 0.85rem;
            font-weight: 800;
            padding: 6px 14px;
            border-radius: 8px;
            letter-spacing: 0.01em;
            transition: all 0.3s ease;
        }

        .treasury-badge.active {
            background: rgba(245, 158, 11, 0.18);
            border: 1px solid #F59E0B;
            color: #FDE68A;
        }

        .treasury-badge.complete {
            background: rgba(34, 197, 94, 0.2);
            border: 1px solid #22C55E;
            color: #86EFAC;
            animation: badgeBounce 0.4s ease-out;
        }

        @keyframes badgeBounce {
            0% { transform: scale(0.9); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        /* Lišta s 10 mincemi v trezoru */
        .treasury-coin-tray {
            display: flex;
            gap: 8px;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            padding: 12px 14px;
            background: rgba(0, 0, 0, 0.42);
            border-radius: 10px;
            border: 1px solid rgba(245, 158, 11, 0.22);
        }

        .treasury-slot {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: transform 0.25s var(--ease-smooth);
            flex-shrink: 0;
            aspect-ratio: 1 / 1;
        }

        .treasury-slot.available .coin-crown-svg {
            cursor: pointer;
            filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.45));
            transition: transform 0.25s var(--ease-smooth), filter 0.25s ease;
            animation: coinGlint 4s infinite ease-in-out;
        }

        .treasury-slot.available:hover .coin-crown-svg {
            transform: scale(1.15) translateY(-2px);
            filter: drop-shadow(0 6px 16px rgba(254, 240, 138, 0.8));
        }

        @keyframes coinGlint {
            0%, 80%, 100% { transform: scale(1); }
            90% { transform: scale(1.08) rotate(4deg); }
        }

        .treasury-slot.spent {
            opacity: 0.45;
        }

        /* Seznam jednotlivých životních pilířů */
        .coins-items-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .coin-pillar-card {
            background: #FFFFFF;
            border: 1.5px solid var(--border-light);
            border-radius: 14px;
            padding: 16px 20px;
            transition: border-color 0.22s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
            position: relative;
        }

        .coin-pillar-card:hover {
            border-color: #FCD34D;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        .coin-pillar-card.card-bounce {
            animation: cardHapticBounce 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes cardHapticBounce {
            0% { transform: scale(1); }
            45% { transform: scale(1.015) translateY(-2px); }
            100% { transform: scale(1) translateY(0); }
        }

        .pillar-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
        }

        .pillar-main-content {
            display: flex;
            align-items: center;
            gap: 14px;
            flex: 1;
            min-width: 0;
        }

        /* Ikonka pilíře – zvětšuje se a proměňuje podle rarity (počtu korunek) */
        .pillar-icon-badge {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: #F8FAFC;
            border: 1.5px solid var(--border-light);
            color: #64748B;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
            will-change: transform;
            position: relative;
        }

        /* Tier 0 (0 korunek) */
        .coin-pillar-card.tier-0 .pillar-icon-badge {
            transform: scale(1);
            background: #F8FAFC;
            border-color: var(--border-light);
            color: #64748B;
            box-shadow: none;
        }

        /* Tier 1 (1–2 korunky): Vzácné / Uncommon */
        .coin-pillar-card.tier-uncommon {
            border-color: #FCD34D;
            background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF5 100%);
            box-shadow: 0 4px 18px rgba(245, 158, 11, 0.1);
        }

        .coin-pillar-card.tier-uncommon .pillar-icon-badge {
            transform: scale(1.14);
            background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
            border-color: #F59E0B;
            color: #92400E;
            box-shadow: 0 4px 14px rgba(245, 158, 11, 0.28);
        }

        /* Tier 2 (3–4 korunky): Epické / Epic */
        .coin-pillar-card.tier-epic {
            border-color: #F59E0B;
            background: linear-gradient(180deg, #FFFFFF 0%, #FFFBEB 100%);
            box-shadow: 0 8px 26px rgba(245, 158, 11, 0.16);
        }

        .coin-pillar-card.tier-epic .pillar-icon-badge {
            transform: scale(1.26);
            background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
            border-color: #D97706;
            color: #78350F;
            box-shadow: 0 6px 20px rgba(217, 119, 6, 0.42);
        }

        /* Tier 3 (5–6 korunek): Legendární / Legendary */
        .coin-pillar-card.tier-legendary {
            border-color: #C084FC;
            background: linear-gradient(180deg, #FFFFFF 0%, #FAF5FF 100%);
            box-shadow: 0 10px 32px rgba(192, 132, 252, 0.2);
        }

        .coin-pillar-card.tier-legendary .pillar-icon-badge {
            transform: scale(1.38);
            background: linear-gradient(135deg, #E9D5FF 0%, #C084FC 50%, #F59E0B 100%);
            border-color: #9333EA;
            color: #3B0764;
            box-shadow: 0 8px 26px rgba(147, 51, 234, 0.45), 0 0 16px rgba(245, 158, 11, 0.35);
        }

        /* Tier 4 (7+ korunek): Mýtické / Mythic */
        .coin-pillar-card.tier-mythic {
            border-color: #F43F5E;
            background: linear-gradient(180deg, #FFFFFF 0%, #FFF1F2 100%);
            box-shadow: 0 12px 38px rgba(244, 63, 94, 0.25);
        }

        .coin-pillar-card.tier-mythic .pillar-icon-badge {
            transform: scale(1.5);
            background: linear-gradient(135deg, #FECDD3 0%, #FB7185 45%, #F59E0B 100%);
            border-color: #E11D48;
            color: #881337;
            box-shadow: 0 10px 32px rgba(225, 29, 72, 0.55), 0 0 22px rgba(245, 158, 11, 0.5);
        }

        .pillar-text-group {
            flex: 1;
            min-width: 0;
        }

        .pillar-title-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .pillar-title {
            font-size: 0.95rem;
            font-weight: 800;
            color: var(--text-dark);
            letter-spacing: -0.01em;
            line-height: 1.3;
        }

        /* Raritní odznáček pilíře */
        .pillar-rarity-chip {
            font-size: 0.68rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 2px 7px;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: all 0.22s ease;
        }

        .pillar-rarity-chip.chip-uncommon {
            background: rgba(245, 158, 11, 0.12);
            color: #B45309;
            border: 1px solid #FCD34D;
        }

        .pillar-rarity-chip.chip-epic {
            background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
            color: #92400E;
            border: 1px solid #F59E0B;
            box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
        }

        .pillar-rarity-chip.chip-legendary {
            background: linear-gradient(135deg, #F3E8FF 0%, #E9D5FF 100%);
            color: #6B21A8;
            border: 1px solid #C084FC;
            box-shadow: 0 2px 8px rgba(168, 85, 247, 0.25);
        }

        .pillar-rarity-chip.chip-mythic {
            background: linear-gradient(135deg, #FFE4E6 0%, #FECDD3 100%);
            color: #9F1239;
            border: 1px solid #F43F5E;
            box-shadow: 0 2px 10px rgba(244, 63, 94, 0.3);
        }

        .pillar-desc {
            font-size: 0.8rem;
            color: var(--text-body);
            line-height: 1.45;
            margin-top: 3px;
        }

        .pillar-controls-group {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
        }

        .pillar-count-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 74px;
            padding: 5px 10px;
            border-radius: 6px;
            font-size: 0.825rem;
            font-weight: 800;
            background: #F1F5F9;
            color: #64748B;
            border: 1px solid #CBD5E1;
            transition: all 0.2s ease;
        }

        .pillar-count-badge.active {
            background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
            color: #92400E;
            border-color: #F59E0B;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.22);
        }

        .btn-pillar-stepper {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.15rem;
            font-weight: 800;
            cursor: pointer;
            transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
            user-select: none;
            -webkit-user-select: none;
            position: relative;
        }

        .btn-pillar-stepper:active:not(:disabled) {
            transform: scale(0.9);
        }

        .btn-pillar-stepper.btn-sub {
            background: #F8FAFC;
            border: 1.5px solid var(--border-light);
            color: var(--text-dark);
        }

        .btn-pillar-stepper.btn-sub:hover:not(:disabled) {
            background: #FEE2E2;
            border-color: #F87171;
            color: #B91C1C;
        }

        .btn-pillar-stepper.btn-sub:disabled {
            opacity: 0.22;
            cursor: not-allowed;
        }

        .btn-pillar-stepper.btn-add {
            background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
            border: 1.5px solid #B45309;
            color: #FFFFFF;
            box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.45);
        }

        .btn-pillar-stepper.btn-add:hover:not(:disabled) {
            background: linear-gradient(135deg, #FBBF24 0%, #EA580C 100%);
            box-shadow: 0 6px 18px rgba(217, 119, 6, 0.48), inset 0 1px 1px rgba(255, 255, 255, 0.6);
            transform: scale(1.06);
        }

        .btn-pillar-stepper.btn-add:disabled {
            background: #E2E8F0;
            border-color: #CBD5E1;
            color: #94A3B8;
            box-shadow: none;
            cursor: not-allowed;
            opacity: 0.55;
        }

        /* Spodní lišta s 10 sloty uvnitř každé karty */
        .pillar-slots-tray {
            display: flex;
            gap: 6px;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid rgba(226, 232, 240, 0.7);
        }

        .pillar-slot {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
            user-select: none;
            -webkit-user-select: none;
            flex-shrink: 0;
            aspect-ratio: 1 / 1;
        }

        .pillar-slot:hover {
            transform: scale(1.2);
        }

        .pillar-slot.filled .coin-crown-svg {
            filter: drop-shadow(0 3px 8px rgba(245, 158, 11, 0.4));
        }

        .pillar-slot.filled.slot-pop-in .coin-crown-svg {
            animation: coinPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes coinPopIn {
            0% { transform: scale(0.2) rotate(-35deg); opacity: 0; }
            65% { transform: scale(1.3) rotate(8deg); }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        .pillar-slot.empty:hover svg {
            filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.4));
        }

        /* Létající animovaná mince mezi trezorem a kartou (GPU-accelerated) */
        .flying-coin-particle {
            pointer-events: none;
            filter: drop-shadow(0 6px 18px rgba(245, 158, 11, 0.7));
            will-change: transform, opacity;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* Plovoucí text +1 / -1 */
        .floating-coin-delta {
            font-size: 1.15rem;
            font-weight: 900;
            pointer-events: none;
            user-select: none;
            animation: floatingDeltaAnim 0.5s ease-out forwards;
            will-change: transform, opacity;
        }

        .floating-coin-delta.delta-plus {
            color: #D97706;
            text-shadow: 0 2px 8px rgba(254, 240, 138, 0.9), 0 0 2px #FFFFFF;
        }

        .floating-coin-delta.delta-minus {
            color: #DC2626;
            text-shadow: 0 2px 8px rgba(254, 202, 202, 0.8), 0 0 2px #FFFFFF;
        }

        @keyframes floatingDeltaAnim {
            0% { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
            25% { transform: translate(-50%, -10px) scale(1.3); opacity: 1; }
            100% { transform: translate(-50%, -32px) scale(0.95); opacity: 0; }
        }

        /* Zlaté jiskřičky při dopadu */
        .gold-sparkle-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: linear-gradient(135deg, #FEF08A, #F59E0B);
            box-shadow: 0 0 8px #FDE047;
            pointer-events: none;
            animation: sparkleBurstAnim 0.45s ease-out forwards;
            will-change: transform, opacity;
        }

        @keyframes sparkleBurstAnim {
            0% { transform: translate(-50%, -50%) scale(0.6); opacity: 1; }
            100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; }
        }

        @media (max-width: 640px) {
            .coins-widget {
                padding: 14px 12px;
                border-radius: 14px;
                margin-bottom: 20px;
            }

            .coins-treasury-card {
                padding: 12px 10px;
                margin-bottom: 16px;
            }

            .treasury-top-row {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }

            .treasury-title-group {
                align-items: flex-start;
                gap: 8px;
            }

            .treasury-title-text {
                font-size: 0.9rem;
            }

            .treasury-sub-text {
                font-size: 0.72rem;
            }

            .treasury-actions-group {
                justify-content: space-between;
                width: 100%;
            }

            .treasury-coin-tray {
                gap: 5px;
                padding: 8px 6px;
                justify-content: center;
                flex-wrap: wrap;
            }

            .treasury-slot {
                width: 28px;
                height: 28px;
                flex-shrink: 0;
                aspect-ratio: 1 / 1;
            }

            .treasury-slot svg {
                width: 26px;
                height: 26px;
            }

            .coin-pillar-card {
                padding: 12px 10px;
                margin-bottom: 12px;
            }

            .pillar-header-row {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }

            .pillar-main-content {
                align-items: flex-start;
                gap: 10px;
            }

            .pillar-icon-badge {
                width: 36px;
                height: 36px;
                flex-shrink: 0;
                margin-top: 2px;
            }

            .pillar-icon-badge svg {
                width: 18px;
                height: 18px;
            }

            .pillar-title {
                font-size: 0.86rem;
                line-height: 1.3;
            }

            .pillar-desc {
                font-size: 0.76rem;
                line-height: 1.4;
            }

            .pillar-controls-group {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                background: #F8FAFC;
                padding: 6px 12px;
                border-radius: 8px;
                border: 1px solid #E2E8F0;
                box-sizing: border-box;
                margin-top: 4px;
            }

            .btn-pillar-stepper {
                width: 40px;
                height: 40px;
                font-size: 1.3rem;
            }

            .pillar-count-badge {
                font-size: 0.85rem;
                font-weight: 800;
                min-width: 90px;
                text-align: center;
            }

            .pillar-slots-tray {
                gap: 4px;
                justify-content: center;
                flex-wrap: wrap;
                margin-top: 10px;
                padding-top: 8px;
            }

            .pillar-slot {
                width: 24px;
                height: 24px;
                flex-shrink: 0;
                aspect-ratio: 1 / 1;
            }

            .pillar-slot svg {
                width: 22px;
                height: 22px;
            }
        }

        /* Navigační tlačítka v testu - MAXIMÁLNĚ USPOKOJIVÁ A HAPTICKÁ */
        .q-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 22px;
            border-top: 1px solid var(--border-light);
            gap: 16px;
        }

        .btn-nav {
            font-family: inherit;
            font-size: 0.94rem;
            font-weight: 700;
            padding: 13px 28px;
            border-radius: var(--radius-btn);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            user-select: none;
            position: relative;
            overflow: hidden;
            transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                        box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                        background 0.2s ease,
                        border-color 0.2s ease;
        }

        .btn-nav svg {
            transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .btn-prev {
            background: #FFFFFF;
            color: #475569;
            border: 1.5px solid #CBD5E1;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .btn-prev:hover:not(:disabled) {
            background: #F8FAFC;
            color: #0F172A;
            border-color: #94A3B8;
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }

        .btn-prev:hover:not(:disabled) svg {
            transform: translateX(-4px);
        }

        .btn-prev:active:not(:disabled) {
            transform: translateY(2px) scale(0.97);
            box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.12);
            transition-duration: 0.04s;
        }

        .btn-prev:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            pointer-events: none;
            background: #F8FAFC;
            border-color: #E2E8F0;
            box-shadow: none;
        }

        .btn-next {
            background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
            color: #FFFFFF;
            border: 1px solid var(--color-accent-hover);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
                        0 2px 5px rgba(0, 0, 0, 0.12),
                        0 6px 18px rgba(0, 0, 0, 0.16);
            transition: all 0.35s ease;
        }

        .btn-next:hover:not(:disabled) {
            background: linear-gradient(180deg, var(--color-accent-hover) 0%, var(--color-accent) 100%);
            transform: translateY(-2px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
                        0 0 0 3px var(--color-accent-soft),
                        0 8px 24px rgba(0, 0, 0, 0.22);
        }

        .btn-next:hover:not(:disabled) svg {
            transform: translateX(5px);
        }

        .btn-next:active:not(:disabled) {
            transform: translateY(2px) scale(0.97);
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3),
                        0 1px 2px rgba(0, 0, 0, 0.15);
            transition-duration: 0.04s;
        }

        .btn-next:disabled {
            background: #E2E8F0;
            color: #94A3B8;
            border-color: #CBD5E1;
            box-shadow: none;
            cursor: not-allowed;
            pointer-events: none;
        }

        @keyframes btnSuperSatisfyingReady {
            0% {
                transform: scale(1);
            }
            35% {
                transform: scale(1.055) translateY(-2px);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                            0 0 0 5px var(--color-accent-soft),
                            0 12px 28px var(--ambient-glow);
            }
            70% {
                transform: scale(0.985);
            }
            100% {
                transform: scale(1);
            }
        }

        .btn-next.btn-ready-pop {
            animation: btnSuperSatisfyingReady 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Obrazovka dokončení */
        .completion-panel {
            text-align: center;
            padding: 40px 20px;
        }

        .completion-icon {
            width: auto;
            height: auto;
            background: none;
            border: none;
            border-radius: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
            color: var(--color-accent);
        }

        .completion-icon svg {
            width: 44px;
            height: 44px;
            stroke: currentColor;
            stroke-width: 2.2;
            fill: none;
        }

        .completion-panel h2 {
            font-size: 1.5rem;
            font-weight: 900;
            letter-spacing: -0.02em;
            margin-bottom: 10px;
        }

        .completion-panel p {
            font-size: 0.95rem;
            color: var(--text-body);
            max-width: 520px;
            margin: 0 auto 28px;
            line-height: 1.6;
        }

        /* Patička */
        footer {
            background-color: var(--bg-surface);
            border-top: 1px solid var(--border-light);
            padding: 34px 24px;
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .footer-inner {
            max-width: 960px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
        }

        .footer-brand {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .footer-brand strong {
            color: var(--text-dark);
            font-size: 0.9rem;
            font-weight: 800;
        }

        .footer-links {
            display: flex;
            gap: 18px;
        }

        .footer-links a {
            color: var(--text-muted);
            text-decoration: none;
            transition: color var(--transition);
        }

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

        /* ============================================== */
        /* INFORMAČNÍ STRÁNKY (METODIKA, PODMÍNKY, KONTAKT) */
        /* ============================================== */
        .info-page-view {
            animation: fadeIn 0.35s var(--ease-smooth);
            margin-bottom: 48px;
        }

        .info-page-card {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-box);
            padding: 44px 40px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
            border-top: 4px solid var(--color-accent);
        }

        .info-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--color-accent);
            text-decoration: none;
            margin-bottom: 24px;
            cursor: pointer;
            transition: transform 0.25s var(--ease-smooth), color 0.2s ease;
        }

        .info-back-btn:hover {
            color: var(--color-accent-hover);
            transform: translate3d(-3px, 0, 0);
        }

        .info-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.725rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            background-color: #FFF7ED;
            border: 1px solid #FFEDD5;
            color: #C2410C;
            padding: 4px 10px;
            border-radius: 4px;
            margin-bottom: 16px;
        }

        .info-badge-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #EA580C;
        }

        .info-page-title {
            font-size: 2rem;
            font-weight: 900;
            letter-spacing: -0.03em;
            color: var(--text-dark);
            margin-bottom: 14px;
            line-height: 1.25;
        }

        .info-page-lead {
            font-size: 1.02rem;
            color: var(--text-body);
            line-height: 1.65;
            margin-bottom: 34px;
            padding-bottom: 24px;
            border-bottom: 1px solid var(--border-light);
        }

        .info-section-block {
            margin-bottom: 36px;
        }

        .info-section-title {
            font-size: 1.25rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--text-dark);
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .info-text {
            font-size: 0.925rem;
            color: var(--text-body);
            line-height: 1.65;
            margin-bottom: 14px;
        }

        .info-text-sm {
            font-size: 0.88rem;
            color: #64748B;
            line-height: 1.6;
            margin-top: 14px;
            background: #F8FAFC;
            padding: 14px 18px;
            border-radius: 6px;
            border-left: 3px solid #CBD5E1;
        }

        .info-grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            margin: 18px 0;
        }

        .info-grid-3 {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin: 18px 0;
        }

        .info-subcard {
            background-color: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 4px;
            padding: 20px;
            transition: transform 0.28s var(--ease-smooth), box-shadow 0.28s var(--ease-smooth), border-color 0.25s ease;
        }

        .info-subcard:hover {
            transform: translate3d(0, -2px, 0);
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
            border-color: #CBD5E1;
        }

        .info-dim-badge {
            display: inline-block;
            font-size: 0.725rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            padding: 3px 8px;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .info-sub-title {
            font-size: 0.98rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 6px;
        }

        .info-sub-desc {
            font-size: 0.86rem;
            color: var(--text-body);
            line-height: 1.55;
        }

        .info-list {
            margin: 14px 0 16px 20px;
            font-size: 0.92rem;
            color: var(--text-body);
            line-height: 1.7;
        }

        .info-list li {
            margin-bottom: 6px;
        }

        .info-faq-item {
            background-color: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 14px;
            padding: 20px 24px;
            margin-bottom: 14px;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
            transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

        .info-faq-item:hover {
            border-color: #CBD5E1;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
            transform: translateY(-1px);
        }

        .info-faq-q {
            font-size: 1.02rem;
            font-weight: 850;
            color: var(--text-dark);
            margin-bottom: 8px;
            line-height: 1.35;
        }

        .info-faq-a {
            font-size: 0.92rem;
            color: #475569;
            line-height: 1.65;
        }

        /* ========================================================== */
        /* MODERNÍ ARCHITEKTURA STRÁNKY METODIKA (SPACIOUS & ANGULAR) */
        /* ========================================================== */
        .metodika-main-card {
            padding: 44px 44px;
            background-color: var(--bg-surface);
            border: 1.5px solid var(--border-light);
            border-radius: var(--radius-box, 20px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
            border-top: 4px solid var(--color-accent);
        }

        .metodika-header {
            margin-bottom: 36px;
            padding-bottom: 32px;
            border-bottom: 1px solid var(--border-light);
        }

        .metodika-clean-badge {
            display: inline-block;
            font-size: 0.74rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-accent);
            background: transparent;
            border: none;
            padding: 0;
            margin-bottom: 12px;
        }

        .metodika-badge {
            display: inline-block;
            font-size: 0.74rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-accent);
            background: transparent;
            border: none;
            padding: 0;
            margin-bottom: 12px;
        }

        .badge-orange { color: #C2410C; }
        .badge-blue { color: #1D4ED8; }
        .badge-purple { color: #7E22CE; }
        .badge-emerald { color: #047857; }

        .metodika-title {
            font-size: clamp(2rem, 3.6vw, 2.75rem);
            font-weight: 900;
            letter-spacing: -0.035em;
            color: var(--text-dark);
            line-height: 1.2;
            margin-bottom: 14px;
        }

        .metodika-title span {
            background: linear-gradient(135deg, var(--color-accent) 0%, #C2410C 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .metodika-lead {
            font-size: 1.05rem;
            color: #475569;
            line-height: 1.7;
            max-width: 920px;
            margin-bottom: 24px;
        }

        /* 4 KPI METRIKY */
        .metodika-stat-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin-top: 24px;
        }

        .metodika-stat-card {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 14px;
            padding: 20px 22px;
            box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02);
            transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
        }

        .metodika-stat-card:hover {
            border-color: #CBD5E1;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
        }

        .metodika-stat-val {
            font-size: 1.55rem;
            font-weight: 900;
            letter-spacing: -0.025em;
            color: #0F172A;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .metodika-stat-val span {
            color: var(--color-accent);
        }

        .metodika-stat-lbl {
            font-size: 0.825rem;
            font-weight: 600;
            color: #64748B;
            line-height: 1.45;
        }

        /* ARCHITEKTURA POSTUPU (PIPELINE) */
        .metodika-pipeline {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
            margin: 36px 0 44px;
        }

        .metodika-pipe-step {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 14px;
            padding: 24px 20px;
            position: relative;
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
            display: flex;
            flex-direction: column;
            transition: transform 0.25s var(--ease-smooth), border-color 0.25s ease, box-shadow 0.25s ease;
        }

        .metodika-pipe-step:hover {
            transform: translateY(-3px);
            border-color: #CBD5E1;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        }

        .metodika-pipe-num {
            font-family: var(--font-mono, monospace);
            font-size: 0.95rem;
            font-weight: 900;
            color: var(--color-accent);
            background: transparent;
            width: auto;
            height: auto;
            border-radius: 0;
            display: inline-block;
            margin-bottom: 10px;
            letter-spacing: 0.05em;
        }

        .metodika-pipe-title {
            font-size: 1.02rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 8px;
            line-height: 1.35;
        }

        .metodika-pipe-desc {
            font-size: 0.85rem;
            color: #64748B;
            line-height: 1.6;
            margin: 0;
        }

        /* HLAVNÍ PROSTORNÉ KARTY SEKCE */
        .metodika-section {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 18px;
            padding: 36px 36px;
            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
            margin-bottom: 32px;
        }

        .metodika-section-header {
            margin-bottom: 24px;
        }

        .metodika-section-title {
            font-size: 1.45rem;
            font-weight: 850;
            letter-spacing: -0.02em;
            color: var(--text-dark);
            margin: 0 0 10px;
            line-height: 1.3;
        }

        .metodika-section-desc {
            font-size: 0.96rem;
            color: #475569;
            line-height: 1.65;
            margin: 0;
            max-width: 920px;
        }

        /* RIASEC 6-DIMENZIONÁLNÍ MŘÍŽKA - PROSTORNÁ 3-SLOUPOVÁ */
        .metodika-riasec-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 20px;
        }

        .metodika-riasec-card {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 14px;
            padding: 22px 22px;
            transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
        }

        .metodika-riasec-card:hover {
            transform: translateY(-3px);
            border-color: #CBD5E1;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        }

        .metodika-riasec-head {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .metodika-riasec-code {
            font-family: var(--font-mono, monospace);
            font-size: 1.05rem;
            font-weight: 900;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            color: #FFFFFF;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .metodika-riasec-title-group {
            display: flex;
            flex-direction: column;
        }

        .metodika-riasec-name {
            font-size: 1.05rem;
            font-weight: 850;
            color: var(--text-dark);
            line-height: 1.25;
        }

        .metodika-riasec-role {
            font-size: 0.76rem;
            font-weight: 700;
            color: #64748B;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .metodika-riasec-body {
            font-size: 0.88rem;
            color: #475569;
            line-height: 1.6;
            margin-bottom: 14px;
            flex: 1;
        }

        .metodika-riasec-tags {
            font-size: 0.8rem;
            color: #334155;
            background: transparent;
            border: 1px solid #E2E8F0;
            border-radius: 8px;
            padding: 10px 12px;
            line-height: 1.45;
        }

        .metodika-riasec-tags strong {
            color: var(--color-accent);
            font-weight: 750;
        }

        /* DVA SLOUPCE PRO MINCE A PROSTŘEDÍ */
        .metodika-split-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 28px;
            margin-bottom: 32px;
        }

        .metodika-split-card {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 18px;
            padding: 34px 32px;
            box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
            display: flex;
            flex-direction: column;
        }

        .metodika-coins-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 18px;
        }

        .metodika-coin-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            background: #FFFFFF;
            border: 1px solid #E2E8F0;
            border-radius: 10px;
            padding: 12px 16px;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }

        .metodika-coin-row:hover {
            border-color: #CBD5E1;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
        }

        .metodika-coin-left {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
        }

        .metodika-coin-num {
            width: auto;
            height: auto;
            border-radius: 0;
            background: transparent;
            color: var(--color-accent);
            font-weight: 850;
            font-family: var(--font-mono, monospace);
            font-size: 0.92rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .metodika-coin-name {
            font-size: 0.92rem;
            font-weight: 750;
            color: var(--text-dark);
        }

        .metodika-coin-pill {
            font-size: 0.74rem;
            font-weight: 700;
            color: #475569;
            background: transparent;
            border: 1px solid #E2E8F0;
            padding: 3px 9px;
            border-radius: 6px;
            white-space: nowrap;
        }

        /* 4 BIPOLÁRNÍ OSY */
        .metodika-bp-list {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-top: 18px;
        }

        .metodika-bp-card {
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 10px;
            padding: 14px 18px;
        }

        .metodika-bp-labels {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            font-size: 0.825rem;
            font-weight: 750;
            color: #1E293B;
            margin-bottom: 8px;
        }

        .metodika-bp-track {
            height: 6px;
            background: #E2E8F0;
            border-radius: 999px;
            position: relative;
        }

        .metodika-bp-fill {
            position: absolute;
            height: 100%;
            background: linear-gradient(90deg, #334155, var(--color-accent));
            border-radius: 999px;
        }

        .metodika-bp-dot {
            position: absolute;
            top: 50%;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #FFFFFF;
            border: 3px solid var(--color-accent);
            transform: translate(-50%, -50%);
            box-shadow: 0 2px 6px rgba(0,0,0,0.18);
        }

        /* TELEMETRIE KARTY */
        .metodika-telemetry-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-top: 22px;
        }

        .metodika-telem-card {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 14px;
            padding: 24px 22px;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
            display: flex;
            flex-direction: column;
        }

        .metodika-telem-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
            border-color: #CBD5E1;
        }

        .metodika-telem-icon {
            width: auto !important;
            height: auto !important;
            background: transparent !important;
            border: none !important;
            padding: 0 !important;
            color: var(--color-accent);
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 14px;
        }

        .metodika-telem-icon svg {
            width: 26px;
            height: 26px;
        }

        .metodika-telem-title {
            font-size: 1.02rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 6px;
        }

        .metodika-telem-desc {
            font-size: 0.85rem;
            color: #475569;
            line-height: 1.6;
            margin: 0;
        }

        /* STRATEGIE 3 PŘIHLÁŠEK CERMAT */
        .metodika-cermat-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin: 22px 0 20px;
        }

        .metodika-cermat-slot {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 16px;
            padding: 26px 24px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
        }

        .metodika-cermat-slot:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 32px -4px rgba(15, 23, 42, 0.09);
            border-color: #CBD5E1;
        }

        .slot-ambice {
            border-top: 3.5px solid #E07A22;
        }

        .slot-jistota {
            border-top: 3.5px solid #0EA5E9;
        }

        .slot-sit {
            border-top: 3.5px solid #10B981;
        }

        .slot-badge {
            font-size: 0.74rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 8px;
        }

        .slot-ambice .slot-badge { color: #E07A22; }
        .slot-jistota .slot-badge { color: #0284C7; }
        .slot-sit .slot-badge { color: #059669; }

        .slot-title {
            font-size: 1.15rem;
            font-weight: 850;
            color: #0F172A;
            margin-bottom: 8px;
        }

        .slot-target {
            font-size: 0.78rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 6px;
            background: transparent;
            margin-bottom: 12px;
            display: inline-block;
            width: fit-content;
        }

        .slot-ambice .slot-target { color: #B45309; border: 1px solid #FCD34D; }
        .slot-jistota .slot-target { color: #0369A1; border: 1px solid #BAE6FD; }
        .slot-sit .slot-target { color: #047857; border: 1px solid #A7F3D0; }

        .slot-desc {
            font-size: 0.88rem;
            color: #475569;
            line-height: 1.6;
            margin: 0;
        }

        .metodika-burnout-banner {
            background: #FFF5F5;
            border: 1.5px solid #FECACA;
            border-radius: 14px;
            padding: 18px 22px;
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 18px;
        }

        .metodika-burnout-icon {
            width: auto !important;
            height: auto !important;
            border-radius: 0;
            background: transparent !important;
            border: none !important;
            color: #DC2626;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 0 !important;
        }

        .metodika-burnout-icon svg {
            width: 24px;
            height: 24px;
        }

        .metodika-burnout-content {
            font-size: 0.88rem;
            color: #7F1D1D;
            line-height: 1.55;
        }

        /* SROVNÁNÍ: DVA PROSTORNÉ SLOUPCE MÍSTO MAČKANÉ TABULKY */
        .metodika-comparison-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 22px;
            margin-top: 22px;
        }

        .metodika-comp-col {
            border-radius: 16px;
            padding: 28px 26px;
            display: flex;
            flex-direction: column;
        }

        .comp-col-old {
            background: #F8FAFC;
            border: 1.5px solid #E2E8F0;
        }

        .comp-col-new {
            background: #FFFFFF;
            border: 2px solid var(--color-accent);
            box-shadow: 0 8px 30px rgba(224, 122, 34, 0.08);
        }

        .comp-col-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
            padding-bottom: 14px;
            border-bottom: 1px solid #E2E8F0;
        }

        .comp-col-title {
            font-size: 1.15rem;
            font-weight: 850;
            color: var(--text-dark);
        }

        .comp-col-badge {
            font-size: 0.72rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            padding: 4px 10px;
            border-radius: 6px;
            background: transparent;
        }

        .comp-col-old .comp-col-badge {
            border: 1px solid #CBD5E1;
            color: #64748B;
        }

        .comp-col-new .comp-col-badge {
            border: 1.5px solid var(--color-accent);
            color: var(--color-accent);
        }

        .comp-item-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .comp-item {
            display: flex;
            gap: 12px;
            font-size: 0.88rem;
            line-height: 1.55;
            align-items: flex-start;
        }

        .comp-item-icon {
            width: auto !important;
            height: auto !important;
            border-radius: 0 !important;
            background: transparent !important;
            border: none !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-weight: 900;
            font-size: 1.1rem;
            line-height: 1.3;
            margin-top: 1px;
        }

        .comp-col-old .comp-item-icon {
            color: #DC2626;
        }

        .comp-col-new .comp-item-icon {
            color: #16A34A;
        }

        .comp-item-content strong {
            display: block;
            color: var(--text-dark);
            font-weight: 750;
            margin-bottom: 2px;
        }

        .comp-col-old .comp-item-content {
            color: #64748B;
        }

        .comp-col-new .comp-item-content {
            color: #334155;
        }

        /* RESPONSIVITA PRO METODIKU */
        @media (max-width: 1024px) {
            .metodika-stat-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .metodika-pipeline {
                grid-template-columns: repeat(2, 1fr);
            }
            .metodika-riasec-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .metodika-split-grid {
                grid-template-columns: 1fr;
            }
            .metodika-cermat-grid {
                grid-template-columns: 1fr;
            }
            .metodika-telemetry-grid {
                grid-template-columns: 1fr;
            }
            .metodika-comparison-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 640px) {
            .metodika-main-card {
                padding: 24px 16px;
            }
            .metodika-section {
                padding: 22px 18px;
            }
            .metodika-pipeline {
                grid-template-columns: 1fr;
            }
            .metodika-stat-grid {
                grid-template-columns: 1fr;
            }
            .metodika-riasec-grid {
                grid-template-columns: 1fr;
            }
        }


        /* ========================================================== */
        /* SPECIFICKÉ MODERNÍ STYLY PRO STRÁNKU KONTAKT              */
        /* ========================================================== */
        .contact-hero-wrap {
            margin-bottom: 24px;
        }

        .contact-clean-badge {
            display: inline-block;
            font-size: 0.74rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-accent);
            background: transparent;
            border: none;
            padding: 0;
            margin-bottom: 10px;
        }

        .contact-status-strip {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 14px;
            padding: 18px 24px;
            margin-bottom: 34px;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
        }

        .contact-status-item {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .status-dot-pulse {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #10B981;
            box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            animation: pulseEmerald 2s infinite;
            flex-shrink: 0;
        }

        @keyframes pulseEmerald {
            0% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            }
            70% {
                box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
            }
        }

        .contact-status-icon {
            width: 24px;
            height: 24px;
            min-width: 24px;
            min-height: 24px;
            max-width: 24px;
            max-height: 24px;
            display: inline-block;
            color: var(--color-accent);
            flex-shrink: 0;
        }

        .contact-status-icon-blue {
            color: #0284C7;
        }

        .contact-status-icon-green {
            color: #10B981;
        }

        .status-text-title {
            font-size: 0.88rem;
            font-weight: 800;
            color: var(--text-dark);
            line-height: 1.25;
        }

        .status-text-sub {
            font-size: 0.76rem;
            color: #64748B;
            margin-top: 2px;
        }

        .contact-channels-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            margin-bottom: 36px;
        }

        .contact-channel-card {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 16px;
            padding: 30px 28px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            transition: transform 0.28s var(--ease-smooth), box-shadow 0.28s var(--ease-smooth), border-color 0.25s ease;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
        }

        .contact-channel-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
        }

        .contact-channel-card.card-parents::before {
            background: linear-gradient(90deg, #E07A22 0%, #EA580C 100%);
        }

        .contact-channel-card.card-schools::before {
            background: linear-gradient(90deg, #0284C7 0%, #0369A1 100%);
        }

        .contact-channel-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
            border-color: #CBD5E1;
        }

        .channel-card-top {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-bottom: 18px;
        }

        .channel-avatar-img {
            width: 68px;
            height: 68px;
            max-width: 68px;
            max-height: 68px;
            border-radius: 50%;
            flex-shrink: 0;
            object-fit: cover;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
            border: 2px solid #FFFFFF;
            transition: transform 0.3s ease;
        }

        .contact-channel-card:hover .channel-avatar-img {
            transform: scale(1.04);
        }

        .channel-badge-clean {
            display: inline-block;
            font-size: 0.72rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            background: transparent;
            border: none;
            padding: 0;
            margin-bottom: 6px;
        }

        .badge-orange-clean {
            color: var(--color-accent);
        }

        .badge-blue-clean {
            color: #0284C7;
        }

        .badge-amber-clean {
            color: #D97706;
        }

        .badge-dark-clean {
            color: #0F172A;
        }

        .channel-title {
            font-size: 1.25rem;
            font-weight: 900;
            letter-spacing: -0.02em;
            color: var(--text-dark);
            line-height: 1.25;
        }

        .channel-desc {
            font-size: 0.9rem;
            color: var(--text-body);
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .channel-email-wrap {
            background: #F8FAFC;
            border: 1.5px solid #E2E8F0;
            border-radius: 10px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 16px;
            transition: border-color 0.2s ease, background-color 0.2s ease;
        }

        .channel-email-wrap:hover {
            border-color: #CBD5E1;
            background: #F1F5F9;
        }

        .channel-email-address {
            font-size: 1.02rem;
            font-weight: 800;
            color: var(--text-dark);
            text-decoration: none;
            letter-spacing: -0.01em;
        }

        .channel-email-address:hover {
            color: var(--color-accent);
        }

        .btn-copy-address {
            background: #FFFFFF;
            border: 1px solid #CBD5E1;
            color: #475569;
            font-family: inherit;
            font-size: 0.76rem;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s ease;
            white-space: nowrap;
        }

        .btn-copy-address:hover {
            background: #0F172A;
            color: #FFFFFF;
            border-color: #0F172A;
        }

        .btn-copy-address.copied {
            background: #10B981 !important;
            color: #FFFFFF !important;
            border-color: #10B981 !important;
        }

        .channel-action-row {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        .btn-mail-action {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 0.88rem;
            font-weight: 800;
            padding: 12px 18px;
            border-radius: 10px;
            text-decoration: none;
            transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        }

        .btn-mail-action-orange {
            background: var(--color-accent);
            color: #FFFFFF;
        }

        .btn-mail-action-orange:hover {
            background: var(--color-accent-hover);
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(224, 122, 34, 0.25);
        }

        .btn-mail-action-blue {
            background: #0284C7;
            color: #FFFFFF;
        }

        .btn-mail-action-blue:hover {
            background: #0369A1;
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25);
        }

        .btn-mail-action-amber {
            background: #D97706;
            color: #FFFFFF;
        }

        .btn-mail-action-amber:hover {
            background: #B45309;
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(217, 119, 6, 0.25);
        }

        .btn-mail-action-dark {
            background: #0F172A;
            color: #FFFFFF;
        }

        .btn-mail-action-dark:hover {
            background: #1E293B;
            transform: translateY(-1px);
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
        }

        .channel-features-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            border-top: 1px solid var(--border-light);
            padding-top: 16px;
        }

        .channel-features-list li {
            font-size: 0.84rem;
            color: #64748B;
            display: flex;
            align-items: center;
            gap: 10px;
            line-height: 1.45;
        }

        .channel-feature-icon {
            width: 16px;
            height: 16px;
            min-width: 16px;
            min-height: 16px;
            max-width: 16px;
            max-height: 16px;
            display: inline-block;
            color: #10B981;
            flex-shrink: 0;
        }

        .contact-cta-box {
            background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
            border: 1.5px solid #334155;
            border-radius: 16px;
            padding: 30px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 36px;
        }

        .contact-cta-title {
            font-size: 1.25rem;
            font-weight: 900;
            color: #FFFFFF;
            margin-bottom: 6px;
        }

        .contact-cta-desc {
            font-size: 0.9rem;
            color: #94A3B8;
            max-width: 540px;
            line-height: 1.5;
        }

        /* ============================================== */
        /* MODERNÍ ARCHITEKTURA STRÁNKY PODMÍNKY SLUŽBY   */
        /* ============================================== */
        .terms-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-accent);
            background: #FFF7ED;
            border: 1px solid #FFEDD5;
            padding: 4px 12px;
            border-radius: 3px;
            margin-bottom: 14px;
        }

        .terms-clean-badge {
            display: inline-block;
            font-size: 0.74rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--color-accent);
            background: transparent;
            border: none;
            padding: 0;
            margin-bottom: 12px;
        }

        .terms-highlight-strip {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 14px;
            padding: 18px 20px;
            margin-bottom: 28px;
            box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
        }

        .terms-highlight-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .terms-strip-icon {
            width: 24px;
            height: 24px;
            min-width: 24px;
            color: #10B981;
            flex-shrink: 0;
            background: transparent !important;
            border: none !important;
        }

        .terms-strip-icon-orange {
            color: var(--color-accent);
        }

        .terms-strip-icon-blue {
            color: #0284C7;
        }

        .terms-cards-stack {
            display: flex;
            flex-direction: column;
            gap: 22px;
            margin-bottom: 36px;
        }

        .terms-card {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 16px;
            padding: 28px 26px;
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
            transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), border-color 0.25s ease;
        }

        .terms-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
            border-color: #CBD5E1;
        }

        .terms-card.highlight-card {
            border: 1.5px solid #E2E8F0;
            border-top: 3.5px solid var(--color-accent);
            background: #FFFFFF;
        }

        .terms-card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .terms-card-icon-wrap {
            width: auto !important;
            height: auto !important;
            border-radius: 0 !important;
            background: transparent !important;
            border: none !important;
            color: var(--color-accent);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 0 !important;
        }

        .terms-card-icon-wrap svg {
            width: 22px;
            height: 22px;
        }

        .terms-card-title {
            font-size: 1.2rem;
            font-weight: 850;
            color: var(--text-dark);
            letter-spacing: -0.02em;
            margin: 0;
        }

        .terms-tier-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 18px;
            margin: 18px 0;
        }

        .terms-tier-box {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 14px;
            padding: 22px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .terms-tier-box.highlight {
            border: 2px solid var(--color-accent);
            box-shadow: 0 6px 24px rgba(224, 122, 34, 0.07);
        }

        .terms-tier-badge {
            display: inline-block;
            font-size: 0.72rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 4px 10px;
            border-radius: 6px;
            margin-bottom: 12px;
            background: transparent;
            border: 1px solid #CBD5E1;
            color: #64748B;
        }

        .terms-tier-box.highlight .terms-tier-badge {
            border: 1.5px solid var(--color-accent);
            color: var(--color-accent);
            background: transparent;
        }

        .terms-tier-title {
            font-size: 1.08rem;
            font-weight: 850;
            color: var(--text-dark);
            margin-bottom: 12px;
        }

        .terms-feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .terms-feature-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.88rem;
            color: var(--text-body);
            line-height: 1.45;
        }

        .terms-feature-list li svg {
            width: 16px;
            height: 16px;
            min-width: 16px;
            margin-top: 2px;
            color: #10B981;
            background: transparent !important;
            border: none !important;
        }

        .terms-tier-box.highlight .terms-feature-list li svg {
            color: var(--color-accent);
        }

        .terms-note-box {
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-left: 3.5px solid var(--color-accent);
            padding: 14px 18px;
            border-radius: 8px;
            margin-top: 14px;
            font-size: 0.88rem;
            color: #475569;
            line-height: 1.6;
        }

        .terms-form-box {
            background: #F8FAFC;
            border: 1.5px dashed #CBD5E1;
            border-radius: 12px;
            padding: 20px 22px;
            margin-top: 16px;
            font-size: 0.84rem;
            line-height: 1.7;
            color: #334155;
            font-family: var(--font-mono, monospace);
        }

        .terms-privacy-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin: 16px 0;
        }

        .terms-privacy-card {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 14px;
            padding: 20px;
        }

        .terms-privacy-title {
            font-size: 0.95rem;
            font-weight: 850;
            color: var(--text-dark);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .terms-privacy-title svg {
            flex-shrink: 0;
            background: transparent !important;
            border: none !important;
        }

        .terms-privacy-text {
            font-size: 0.865rem;
            color: #64748B;
            line-height: 1.6;
            margin: 0;
        }

        @media (max-width: 780px) {
            .info-grid-2, .info-grid-3 {
                grid-template-columns: 1fr;
            }
            .info-page-card {
                padding: 28px 20px;
            }
            .info-page-title {
                font-size: 1.6rem;
            }
            .contact-status-strip {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .contact-channels-grid {
                grid-template-columns: 1fr;
            }
            .contact-cta-box {
                flex-direction: column;
                align-items: stretch;
            }
            .contact-cta-box .btn-diagonal {
                width: 100%;
                justify-content: center;
            }
            .terms-highlight-strip {
                grid-template-columns: 1fr;
                gap: 12px;
                padding: 16px;
            }
            .terms-tier-grid, .terms-privacy-grid {
                grid-template-columns: 1fr;
            }
            .terms-card {
                padding: 22px 18px;
            }
        }


        /* ============================================== */
        /* ONBOARDING (KROK 0) STYLY */
        /* ============================================== */
        .onboarding-wrapper {
            animation: fadeIn 0.3s ease;
        }

        .onboarding-hero {
            margin-bottom: 24px;
        }

        .onboarding-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-accent);
            background-color: #FFF7ED;
            padding: 4px 10px;
            border-radius: 4px;
            margin-bottom: 10px;
            border: 1px solid #FFEDD5;
        }

        .onboarding-title {
            font-size: 1.5rem;
            font-weight: 900;
            letter-spacing: -0.025em;
            color: var(--text-dark);
            margin-bottom: 8px;
            line-height: 1.25;
        }

        .onboarding-desc {
            font-size: 0.925rem;
            color: var(--text-muted);
            line-height: 1.55;
        }

        .onboarding-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 28px;
        }

        .onboarding-field {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .onboarding-label {
            font-size: 0.88rem;
            font-weight: 800;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .onboarding-hint {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-top: -4px;
        }

        .onboarding-select {
            width: 100%;
            height: 48px;
            box-sizing: border-box;
            padding: 0 14px;
            border: 1.5px solid var(--border-light);
            border-radius: var(--radius-btn);
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-dark);
            background-color: #FFFFFF;
            cursor: pointer;
            transition: var(--transition);
            font-family: inherit;
        }

        .onboarding-select:focus {
            outline: none;
            border-color: var(--color-accent);
            box-shadow: 0 0 0 3px rgba(224, 122, 34, 0.15);
        }

        .onboarding-select:disabled {
            background-color: #F8FAFC;
            color: #94A3B8 !important;
            -webkit-text-fill-color: #94A3B8;
            border-color: #E2E8F0;
            cursor: not-allowed;
        }

        .onboarding-select:disabled option {
            color: #94A3B8 !important;
            -webkit-text-fill-color: #94A3B8;
        }

        .onboarding-pills {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px;
        }

        #pillsDojezd {
            grid-template-columns: repeat(3, 1fr);
        }

        #pillsTrida {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 640px) {
            .onboarding-pills,
            #pillsDojezd,
            #pillsTrida,
            #pillsPref,
            #pillsProspech,
            #pillsPredmet {
                grid-template-columns: 1fr !important;
                gap: 8px;
            }

            .pill-btn {
                padding: 12px 14px;
                min-height: 48px;
            }
        }

        .pill-btn {
            background-color: #FFFFFF;
            border: 2px solid #E2E8F0;
            border-radius: var(--radius-btn);
            padding: 13px 16px;
            text-align: left;
            cursor: pointer;
            transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                        background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            flex-direction: column;
            gap: 4px;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
            user-select: none;
        }

        .pill-btn:hover {
            border-color: var(--color-accent);
            background-color: var(--color-accent-soft);
            transform: translateY(-2px);
            box-shadow: 0 6px 16px var(--ambient-glow);
        }

        .pill-btn:active {
            transform: translateY(1.5px) scale(0.98);
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
            transition-duration: 0.04s;
        }

        .pill-btn.selected {
            animation: optionJuicySelect 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
            border-color: var(--color-accent);
            background: linear-gradient(135deg, #FFFDFB 0%, var(--color-accent-soft) 100%);
            box-shadow: 0 0 0 3px var(--color-accent-soft), 0 6px 18px var(--ambient-glow);
            transform: translateY(-2px);
        }

        .pill-main {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--text-dark);
        }

        .pill-btn.selected .pill-main {
            color: var(--color-accent);
        }

        .pill-sub {
            font-size: 0.775rem;
            color: var(--text-muted);
            line-height: 1.35;
        }

        /* Gender Selection Segmented Pills in Step 1 */
        .gender-pills-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        .gender-pill-btn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 0 8px;
            height: 48px;
            box-sizing: border-box;
            border: 2px solid #E2E8F0;
            border-radius: var(--radius-btn, 8px);
            background: #FFFFFF;
            cursor: pointer;
            transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                        background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                        box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                        transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
            user-select: none;
            font-family: inherit;
            text-align: center;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
        }

        .gender-pill-btn svg {
            flex-shrink: 0;
            color: #64748B;
            transition: color 0.18s ease, transform 0.18s ease;
        }

        .gender-pill-btn .gender-pill-name {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--text-dark, #0F172A);
            letter-spacing: 0.01em;
            line-height: 1;
        }

        .gender-pill-btn .gender-pill-hint {
            font-size: 0.76rem;
            font-weight: 500;
            color: #64748B;
            line-height: 1;
        }

        .gender-pill-btn:hover {
            border-color: var(--color-accent);
            background-color: var(--color-accent-soft);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px var(--ambient-glow);
        }

        .gender-pill-btn:active {
            transform: translateY(1px) scale(0.98);
        }

        .gender-pill-btn.selected {
            animation: optionJuicySelect 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
            border-color: var(--color-accent);
            background: linear-gradient(135deg, #FFFDFB 0%, var(--color-accent-soft) 100%);
            box-shadow: 0 0 0 3px var(--color-accent-soft), 0 4px 14px var(--ambient-glow);
            transform: translateY(-1px);
        }

        .gender-pill-btn.selected svg {
            color: var(--color-accent);
            transform: scale(1.1);
        }

        .gender-pill-btn.selected .gender-pill-name {
            color: var(--color-accent);
        }

        .gender-pill-btn.selected .gender-pill-hint {
            color: var(--color-accent-hover);
            font-weight: 600;
        }

        @media (max-width: 440px) {
            .gender-pill-btn {
                padding: 0 4px;
                gap: 4px;
            }
            .gender-pill-btn .gender-pill-hint {
                display: none;
            }
        }

        .onboarding-cta-wrap {
            display: flex;
            justify-content: flex-end;
            padding-top: 20px;
            border-top: 1px solid var(--border-light);
        }

        /* Validace a interaktivní indikátory onboarding formuláře */
        .onb-field-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 4px;
        }

        .onb-status-badge {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(0.65);
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.34, 1.35, 0.64, 1);
            flex-shrink: 0;
        }

        .onb-status-badge.is-valid {
            opacity: 1;
            transform: scale(1);
            background: #ECFDF5;
            color: #059669;
            border: 1px solid #A7F3D0;
            box-shadow: 0 1px 3px rgba(16, 185, 129, 0.14);
            animation: onbCheckPop 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) both;
        }

        .onb-status-badge.is-error {
            opacity: 1;
            transform: scale(1);
            background: #FEF2F2;
            color: #DC2626;
            border: 1px solid #FECACA;
            box-shadow: 0 1px 3px rgba(220, 38, 38, 0.12);
            animation: onbErrorPop 0.28s cubic-bezier(0.34, 1.4, 0.64, 1) both;
        }

        @keyframes onbCheckPop {
            0% { transform: scale(0.65); opacity: 0; }
            70% { transform: scale(1.12); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes onbErrorPop {
            0% { transform: scale(0.65); opacity: 0; }
            70% { transform: scale(1.12); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }

        .onboarding-field.has-error {
            animation: onbSoftShake 0.36s ease-in-out both;
        }

        @keyframes onbSoftShake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-3px); }
            40%, 80% { transform: translateX(3px); }
        }

        .onboarding-field.has-error .onboarding-pills {
            border: 1.5px solid #FCD34D !important;
            border-radius: 8px;
            padding: 6px;
            background: rgba(254, 243, 199, 0.35);
        }

        .onboarding-field.has-error .onboarding-select,
        .onboarding-field.has-error .onb-text-input {
            border-color: #F59E0B !important;
            box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16) !important;
        }

        .onboarding-field.has-error .onboarding-label {
            color: var(--text-dark) !important;
        }

        /* Pouze při vulgárním textu se použije červená */
        .onboarding-field.has-error.is-vulgar .onb-text-input {
            border-color: #F87171 !important;
            background-color: #FFF5F5 !important;
            box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2) !important;
        }

        .onboarding-field.has-error.is-vulgar .onboarding-label {
            color: #B91C1C !important;
        }

        /* Modern Multi-Region Selector in Step 2 */
        .onb-subcard-regions {
            background: #F8FAFC;
            border: 1.5px solid #E2E8F0;
            border-radius: 14px;
            padding: 16px 18px;
            margin-top: 14px;
            transition: border-color 0.2s ease;
        }

        .onb-subcard-regions:focus-within {
            border-color: #CBD5E1;
        }

        .onb-regions-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }

        .onb-regions-title {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 0.88rem;
            font-weight: 700;
            color: #0F172A;
        }

        .onb-regions-title svg {
            color: var(--color-accent);
            flex-shrink: 0;
        }

        .onb-optional-badge {
            font-size: 0.68rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: #F1F5F9;
            color: #64748B;
            padding: 2px 7px;
            border-radius: 9999px;
            border: 1px solid #E2E8F0;
        }

        .onb-home-region-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.775rem;
            color: #0369A1;
            background: #E0F2FE;
            border: 1px solid #BAE6FD;
            padding: 3px 9px;
            border-radius: 9999px;
            font-weight: 600;
        }

        .onb-home-region-tag svg {
            color: #0284C7;
            flex-shrink: 0;
        }

        .onb-regions-desc {
            font-size: 0.79rem;
            color: #64748B;
            margin-bottom: 12px;
            line-height: 1.45;
        }

        .onb-regions-chip-grid,
        .multi-regions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 8px;
        }

        .region-chip,
        .region-chip-btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 12px;
            min-height: 42px;
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 10px;
            font-size: 0.83rem;
            font-weight: 600;
            color: #334155;
            cursor: pointer;
            transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
            user-select: none;
            text-align: left;
            box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
            font-family: inherit;
        }

        .region-chip:hover:not(.is-home),
        .region-chip-btn:hover:not(.home-region) {
            border-color: var(--color-accent);
            background: var(--color-accent-soft);
            color: var(--color-accent);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px var(--ambient-glow);
        }

        .region-chip:active:not(.is-home),
        .region-chip-btn:active:not(.home-region) {
            transform: translateY(1px);
            transition-duration: 0.04s;
        }

        .region-chip.is-selected,
        .region-chip-btn.selected {
            animation: optionJuicySelect 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            border-color: var(--color-accent);
            background: linear-gradient(135deg, #FFFFFF 0%, var(--color-accent-soft) 100%);
            color: var(--color-accent);
            font-weight: 700;
            box-shadow: 0 0 0 2px var(--color-accent-soft), 0 3px 10px var(--ambient-glow);
            transform: translateY(-1px);
        }

        .region-chip-check-box {
            width: 18px;
            height: 18px;
            border-radius: 5px;
            border: 1.5px solid #CBD5E1;
            background: #F8FAFC;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.18s ease;
        }

        .region-chip-check-box svg {
            stroke: #FFFFFF;
            stroke-width: 3.2;
            opacity: 0;
            transform: scale(0.6);
            transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .region-chip.is-selected .region-chip-check-box,
        .region-chip-btn.selected .region-chip-check-box {
            border-color: var(--color-accent);
            background: var(--color-accent);
        }

        .region-chip.is-selected .region-chip-check-box svg,
        .region-chip-btn.selected .region-chip-check-box svg {
            opacity: 1;
            transform: scale(1);
        }

        .region-chip.is-home,
        .region-chip-btn.home-region {
            background: #F1F5F9;
            border-color: #CBD5E1;
            color: #64748B;
            cursor: default;
            opacity: 0.85;
        }

        .region-chip.is-home .region-chip-check-box,
        .region-chip-btn.home-region .region-chip-check-box {
            border-color: #059669;
            background: #059669;
        }

        .region-chip.is-home .region-chip-check-box svg,
        .region-chip-btn.home-region .region-chip-check-box svg {
            opacity: 1;
            transform: scale(1);
        }

        .region-chip-name {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .region-chip-home-label {
            font-size: 0.68rem;
            color: #059669;
            font-weight: 700;
            background: #ECFDF5;
            padding: 1px 5px;
            border-radius: 4px;
            border: 1px solid #A7F3D0;
        }

        .btn-diagonal.btn-onb-pending {
            background: #94A3B8 !important;
            border-color: #64748B !important;
            box-shadow: 0 2px 6px rgba(100, 116, 139, 0.2) !important;
            color: #F8FAFC !important;
            cursor: pointer;
            transition: all 0.22s ease;
        }

        .btn-diagonal.btn-onb-pending:hover {
            background: #64748B !important;
            color: #FFFFFF !important;
            transform: translateY(-1px);
        }


                /* ============================================== */
        /* PROFESIONÁLNÍ KOGNITIVNÍ SKENER (NÁHRADA PANÁČKA) */
        /* ============================================== */
        .eval-scanner-screen {
            background: #FFFFFF;
            color: var(--text-dark);
            border: 1px solid #E2E8F0;
            border-radius: var(--radius-box);
            padding: 48px 32px;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
            text-align: center;
            max-width: 680px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            animation: cardSlideIn 0.35s ease-out;
        }

        .scanner-visual-wrap {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 0 auto 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .scanner-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        .scanner-ring-outer {
            transform-origin: 75px 75px;
            animation: spinSlow 10s linear infinite;
        }

        .scanner-ring-inner {
            transform-origin: 75px 75px;
            animation: spinReverse 6s linear infinite;
        }

        .scanner-polygon {
            transform-origin: 75px 75px;
            animation: pulsePolygon 2.4s ease-in-out infinite alternate;
        }

        @keyframes spinSlow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes spinReverse {
            from { transform: rotate(360deg); }
            to { transform: rotate(0deg); }
        }

        @keyframes pulsePolygon {
            0% { transform: scale(0.82) rotate(0deg); opacity: 0.75; }
            100% { transform: scale(1.06) rotate(15deg); opacity: 1; }
        }

        .scanner-headline {
            font-size: 1.4rem;
            font-weight: 800;
            color: #FFFFFF;
            margin-bottom: 8px;
            letter-spacing: -0.02em;
        }

        .scanner-stage-text {
            font-size: 0.92rem;
            color: #FDBA74;
            font-weight: 600;
            min-height: 24px;
            margin-bottom: 24px;
        }

        .scanner-progress-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            height: 8px;
            overflow: hidden;
            max-width: 460px;
            margin: 0 auto 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .scanner-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #E07A22, #F59E0B);
            border-radius: 3px;
            transition: width 0.35s ease;
            box-shadow: 0 0 14px rgba(224, 122, 34, 0.6);
        }

        .scanner-percent-label {
            font-size: 1.1rem;
            font-weight: 800;
            color: #F8FAFC;
            font-variant-numeric: tabular-nums;
        }

        .scanner-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.725rem;
            font-weight: 700;
            color: #CBD5E1;
            background-color: rgba(255, 255, 255, 0.06);
            padding: 5px 12px;
            border-radius: 3px;
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        /* KOGNITIVNÍ PROFIL (5 DIMENZÍ RADAR BARS) */
        .radar-bars-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 8px;
        }

        .radar-bar-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .radar-bar-head {
            display: flex;
            justify-content: space-between;
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text-dark);
        }

        .radar-bar-track {
            height: 8px;
            background: #F1F5F9;
            border-radius: 3px;
            overflow: hidden;
        }

        .radar-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #EA580C, var(--color-accent));
            border-radius: 3px;
            transition: width 0.8s ease;
        }

        /* HERO RESUME & RESET BUTTONS */
        /* ============================================== */
        .hero-resume-group {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .btn-resume {
            animation: pulseResume 2s infinite ease-in-out;
        }

        @keyframes pulseResume {
            0%, 100% { box-shadow: 0 4px 14px rgba(224, 122, 34, 0.25); }
            50% { box-shadow: 0 6px 20px rgba(224, 122, 34, 0.45); }
        }

        .btn-reset-square {
            width: 52px;
            height: 52px;
            background: #FFFFFF;
            border: 2px solid #CBD5E1;
            border-radius: var(--radius-btn);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        .btn-reset-square:hover {
            background: #FEE2E2;
            border-color: #EF4444;
            color: #DC2626;
            transform: rotate(-45deg) scale(1.05);
        }

        .btn-reset-square:active {
            transform: rotate(-90deg) scale(0.95);
        }

        .btn-hero-restart {
            background: #FFFFFF !important;
            color: #334155 !important;
            border: 2px solid #CBD5E1 !important;
            font-weight: 700 !important;
            padding: 14px 22px !important;
            font-size: 0.95rem !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 10px !important;
            cursor: pointer !important;
            border-radius: var(--radius-btn) !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .btn-hero-restart svg {
            color: #64748B;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
        }

        .btn-hero-restart:hover {
            background: #FFF1F2 !important;
            border-color: #FDA4AF !important;
            color: #BE123C !important;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(225, 29, 72, 0.12) !important;
        }

        .btn-hero-restart:hover svg {
            color: #E11D48;
            transform: rotate(-180deg);
        }

        .btn-hero-restart:active {
            transform: translateY(0);
        }

        .btn-retake-outline {
            background: #FFFFFF !important;
            color: var(--text-dark, #0F172A) !important;
            border: 2px solid #CBD5E1 !important;
            font-weight: 700 !important;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
        }

        .btn-retake-outline:hover {
            background: #F8FAFC !important;
            border-color: #94A3B8 !important;
            color: #0F172A !important;
            transform: translateY(-2px);
        }

        /* ============================================== */
        /* TEST CHOICE MODAL (ZOBRAZIT VÝSLEDEK VS UDĚLAT TEST ZNOVU) */
        /* ============================================== */
        .test-choice-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: rgba(15, 23, 42, 0.72);
            backdrop-filter: blur(5px);
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            animation: fadeInModal 0.2s ease-out;
        }

        .test-choice-dialog {
            background: #FFFFFF;
            border: 2px solid #CBD5E1;
            border-radius: var(--radius-box, 4px);
            max-width: 580px;
            width: 100%;
            padding: 34px 30px;
            position: relative;
            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
            animation: slideUpModal 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .test-choice-close {
            position: absolute;
            top: 14px;
            right: 16px;
            background: none;
            border: none;
            font-size: 28px;
            line-height: 1;
            color: #94A3B8;
            cursor: pointer;
            transition: color 0.2s;
            padding: 4px 8px;
        }
        .test-choice-close:hover {
            color: #0F172A;
        }

        .test-choice-badge {
            display: inline-block;
            background: #FFF7ED;
            color: var(--primary, #E07A22);
            border: 1px solid #FFEDD5;
            padding: 4px 10px;
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            border-radius: 4px;
            margin-bottom: 12px;
        }

        .test-choice-title {
            font-size: 1.35rem;
            font-weight: 900;
            color: #0F172A;
            margin: 0 0 8px 0;
            letter-spacing: -0.02em;
        }

        .test-choice-sub {
            font-size: 0.92rem;
            color: var(--text-muted, #64748B);
            line-height: 1.5;
            margin: 0 0 24px 0;
        }

        .test-choice-grid {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .test-choice-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px 20px;
            text-align: left;
            background: #F8FAFC;
            border: 2px solid #E2E8F0;
            border-radius: var(--radius-box, 4px);
            cursor: pointer;
            transition: all 0.2s ease;
            width: 100%;
        }

        .test-choice-card:hover {
            background: #FFFFFF;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
        }

        .test-choice-primary:hover {
            border-color: var(--primary, #E07A22);
        }

        .test-choice-secondary:hover {
            border-color: #0F172A;
        }

        .test-choice-icon-wrap {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
        }

        .test-choice-icon-wrap.primary {
            background: #FFF7ED;
            color: var(--primary, #E07A22);
            border: 1px solid #FFEDD5;
        }

        .test-choice-icon-wrap.secondary {
            background: #F1F5F9;
            color: #475569;
            border: 1px solid #E2E8F0;
        }

        .test-choice-text {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .test-choice-text strong {
            font-size: 1.02rem;
            font-weight: 800;
            color: #0F172A;
        }

        .test-choice-text span {
            font-size: 0.82rem;
            color: #64748B;
            line-height: 1.4;
        }

        @keyframes fadeInModal {
            from { opacity: 0; }
            to { opacity: 1; }
        }

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

        .test-choice-overlay.overlay-fade-out {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .test-choice-dialog.dialog-confirm-exit {
            animation: confirmDialogExit 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
        }

        @keyframes confirmDialogExit {
            0% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
            30% {
                transform: scale(1.02) translateY(-4px);
            }
            100% {
                opacity: 0;
                transform: scale(0.92) translateY(24px);
                filter: blur(4px);
            }
        }

        @keyframes spinOnceCheck {
            0% { transform: scale(0.6) rotate(-45deg); opacity: 0; }
            50% { transform: scale(1.15) rotate(5deg); }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }

        .spin-once {
            animation: spinOnceCheck 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* TOAST NOTIFIKACE (POTVRZENÍ SMAZÁNÍ A RESTARTU) */
        .mujobor-toast {
            position: fixed;
            top: 24px;
            left: 50%;
            transform: translateX(-50%) translateY(-24px);
            background: #0F172A;
            color: #FFFFFF;
            padding: 12px 22px;
            border-radius: 999px;
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.28), 0 3px 8px rgba(0, 0, 0, 0.12);
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 10001;
            opacity: 0;
            pointer-events: none;
            transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1);
            border: 1px solid rgba(255, 255, 255, 0.16);
            backdrop-filter: blur(10px);
        }

        .mujobor-toast.toast-show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
            pointer-events: auto;
        }

        .mujobor-toast-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #10B981;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
        }

        .mujobor-toast-text {
            display: flex;
            flex-direction: column;
            line-height: 1.25;
            text-align: left;
        }

        .mujobor-toast-text strong {
            font-size: 0.88rem;
            font-weight: 700;
            color: #FFFFFF;
            letter-spacing: -0.01em;
        }

        .mujobor-toast-text span {
            font-size: 0.78rem;
            color: #94A3B8;
        }

        @keyframes heroBtnPopFresh {
            0% {
                opacity: 0;
                transform: scale(0.92) translateY(8px);
            }
            60% {
                transform: scale(1.02) translateY(-2px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        .hero-btn-fresh-appear {
            animation: heroBtnPopFresh 0.42s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }


        /* ============================================== */
        /* SLAVNÁ OSOBNOST KARTA */
        /* ============================================== */
        .personality-highlight-card {
            background: linear-gradient(135deg, #FFFFFF 0%, #FFFBEB 100%);
            border: 2px solid #FDE68A;
            border-radius: var(--radius-box);
            padding: 24px 26px;
            margin-bottom: 24px;
            box-shadow: 0 6px 18px rgba(245, 158, 11, 0.08);
            position: relative;
            overflow: hidden;
            animation: cardSlideIn 0.4s ease-out;
        }

        .personality-highlight-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #F59E0B, #E07A22);
        }

        .pers-header {
            margin-bottom: 14px;
        }

        .pers-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #B45309;
            background: #FEF3C7;
            padding: 4px 10px;
            border-radius: 3px;
            margin-bottom: 8px;
        }

        .pers-name {
            font-size: 1.55rem;
            font-weight: 900;
            color: var(--text-dark);
            letter-spacing: -0.02em;
            margin-bottom: 2px;
        }

        .pers-role {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text-muted);
        }

        .pers-quote-box {
            background: #FFFFFF;
            border-left: 3px solid var(--color-accent);
            border-radius: 0 4px 4px 0;
            padding: 12px 16px;
            margin: 12px 0 14px 0;
            font-style: italic;
            font-size: 0.95rem;
            color: var(--text-dark);
            line-height: 1.5;
            box-shadow: 0 1px 4px rgba(0,0,0,0.03);
        }

        .pers-reason {
            font-size: 0.9rem;
            color: var(--text-body);
            line-height: 1.6;
        }

        .pers-reason strong {
            color: var(--text-dark);
        }

        /* RIASEC BADGE */
        .riasec-tag-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            background: #EEF2FF;
            color: #4F46E5;
            border: 1px solid #C7D2FE;
            padding: 2px 8px;
            border-radius: 4px;
        }

        /* CARD SLIDE IN ANIMATION */
        @keyframes cardSlideIn {
            0% { opacity: 0; transform: translateY(14px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .question-box {
            animation: cardSlideIn 0.35s ease-out;
        }



        /* ============================================== */
        /* STYLY PRO REGIONÁLNÍ ŠKOLY V REPORTU */
        /* ============================================== */
        .rec-schools-box {
            background-color: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: var(--radius-btn);
            padding: 14px 16px;
            margin: 6px 0 10px 0;
        }

        .rec-schools-title {
            font-size: 0.8rem;
            font-weight: 800;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
            letter-spacing: 0.02em;
        }

        .rec-schools-tags {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .rec-school-item {
            display: flex;
            align-items: center;
            gap: 8px;
            background-color: #FFFFFF;
            border: 1px solid #CBD5E1;
            padding: 7px 12px;
            border-radius: 4px;
            font-size: 0.84rem;
            font-weight: 600;
            color: var(--text-dark);
        }

        .rec-school-ico {
            font-size: 1rem;
            flex-shrink: 0;
        }

        .rec-school-text {
            line-height: 1.35;
        }

        .report-wrapper {
            display: flex;
            flex-direction: column;
            gap: 24px;
            animation: fadeIn 0.4s ease;
        }

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

        .archetype-hero-card {
            background: #FFFFFF;
            color: var(--text-dark);
            border-radius: var(--radius-box);
            padding: 36px 32px;
            position: relative;
            overflow: hidden;
            border: 1px solid var(--border-light);
            border-left: 5px solid var(--color-accent);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
        }

        .archetype-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background-color: #FFF7ED;
            border: 1px solid #FFEDD5;
            color: #C2410C;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 4px 12px;
            border-radius: 4px;
            margin-bottom: 14px;
        }

        .archetype-title {
            font-size: 1.85rem;
            font-weight: 900;
            letter-spacing: -0.03em;
            margin-bottom: 8px;
            color: #0F172A;
        }

        .archetype-tagline {
            font-size: 1.05rem;
            color: var(--color-accent);
            margin-bottom: 20px;
            font-weight: 700;
            line-height: 1.5;
        }

        .archetype-desc {
            font-size: 0.925rem;
            color: #334155;
            line-height: 1.7;
            white-space: pre-line;
        }

        /* Dvě metriky vedle sebe: Teorie vs Praxe & Silné stránky */
        .metrics-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .metric-card {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-box);
            padding: 24px;
        }

        .metric-card h3 {
            font-size: 1.1rem;
            font-weight: 800;
            margin-bottom: 14px;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Teorie vs. Praxe grafická lišta */
        .ratio-bar-wrap {
            display: flex;
            height: 28px;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 12px;
            border: 1px solid var(--border-light);
        }

        .ratio-practice {
            background: linear-gradient(90deg, #E07A22 0%, #EA580C 100%);
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 800;
            transition: width 1s ease;
        }

        .ratio-theory {
            background-color: #334155;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 800;
            transition: width 1s ease;
        }

        .ratio-legend {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-bottom: 10px;
        }

        .ratio-comment {
            font-size: 0.85rem;
            color: var(--text-body);
            line-height: 1.5;
        }

        /* Seznam silných stránek */
        .strengths-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .strengths-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.88rem;
            color: var(--text-dark);
            line-height: 1.45;
        }

        .strengths-list li svg {
            width: 18px;
            height: 18px;
            stroke: #16A34A;
            flex-shrink: 0;
            margin-top: 2px;
        }

        /* ZAMČENÝ BLOK S ROZMAZÁNÍM A CTA */
        .locked-curtain-card {
            background-color: #FFFFFF;
            border: 2px dashed #FED7AA;
            border-radius: var(--radius-box);
            padding: 36px 28px;
            text-align: center;
            position: relative;
            background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, #FFFDF9 100%);
            box-shadow: 0 10px 30px rgba(224, 122, 34, 0.08);
        }

        .locked-curtain-card h3 {
            font-size: 1.4rem;
            font-weight: 900;
            margin-bottom: 8px;
            color: var(--text-dark);
        }

        .locked-curtain-card p {
            font-size: 0.925rem;
            color: var(--text-body);
            max-width: 580px;
            margin: 0 auto 24px;
            line-height: 1.6;
        }

        .locked-features-row {
            display: flex;
            justify-content: center;
            gap: 18px;
            flex-wrap: wrap;
            margin-bottom: 26px;
        }

        .locked-feat {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.825rem;
            font-weight: 700;
            color: var(--text-dark);
            background-color: #FFF7ED;
            padding: 6px 14px;
            border-radius: 6px;
            border: 1px solid #FED7AA;
        }

        /* Doporučené školy / obory (Plná verze) */
        .recs-grid {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .rec-card {
            background-color: #FFFFFF;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-box);
            padding: 24px;
            border-left: 5px solid var(--color-accent);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .rec-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 10px;
        }

        .rec-title-block h4 {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--text-dark);
        }

        .rec-code {
            font-size: 0.775rem;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 0.04em;
        }

        .rec-match-badge {
            background-color: #ECFDF5;
            color: #059669;
            border: 1px solid #A7F3D0;
            font-size: 0.825rem;
            font-weight: 800;
            padding: 5px 12px;
            border-radius: 6px;
        }

        .rec-why {
            font-size: 0.885rem;
            color: var(--text-body);
            line-height: 1.55;
        }

        .rec-career {
            font-size: 0.825rem;
            color: var(--text-muted);
            background-color: #F8FAFC;
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid #E2E8F0;
        }

        /* Semafor: Čemu se vyhnout */
        .avoid-card {
            background-color: #FEF2F2;
            border: 1px solid #FECACA;
            border-radius: var(--radius-box);
            padding: 24px;
        }

        .avoid-card h3 {
            font-size: 1.1rem;
            font-weight: 800;
            color: #991B1B;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .avoid-item {
            margin-bottom: 12px;
        }

        .avoid-item:last-child {
            margin-bottom: 0;
        }

        .avoid-item strong {
            color: #991B1B;
            font-size: 0.95rem;
            display: block;
            margin-bottom: 4px;
        }

        .avoid-item p {
            font-size: 0.85rem;
            color: #7F1D1D;
            line-height: 1.5;
        }

        /* Tahák pro rodiče */
        .parents-summary-box {
            background-color: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-left: 4px solid var(--color-accent);
            color: #1E293B;
            border-radius: var(--radius-box);
            padding: 28px;
        }

        .parents-summary-box h3 {
            font-size: 1.15rem;
            font-weight: 800;
            color: #0F172A;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .parents-summary-box ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .parents-summary-box li {
            font-size: 0.885rem;
            color: #334155;
            line-height: 1.55;
            padding-left: 20px;
            position: relative;
        }

        .parents-summary-box li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--color-accent);
            font-size: 1.2rem;
            line-height: 1;
        }

        /* MODAL FALEŠNÉ PLATBY */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(15, 23, 42, 0.75);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 20px;
            backdrop-filter: blur(4px);
        }

        .modal-box {
            background-color: #FFFFFF;
            border: 1px solid var(--border-light);
            border-radius: var(--radius-box);
            width: 100%;
            max-width: 480px;
            padding: 32px;
            box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.16);
            position: relative;
            animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

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

        .modal-close-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 36px;
            height: 36px;
            border-radius: var(--radius-pill);
            background: #F1F5F9;
            border: 1px solid var(--border-light);
            color: var(--text-body);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            padding: 0;
            z-index: 10;
        }

        .modal-close-btn:hover {
            background: #E2E8F0;
            color: var(--text-dark);
            transform: scale(1.06);
        }

        .modal-close-btn svg {
            width: 18px;
            height: 18px;
            stroke-width: 2.2;
        }

        .modal-title {
            font-size: 1.35rem;
            font-weight: 900;
            margin-bottom: 6px;
            color: var(--text-dark);
        }

        .modal-subtitle {
            font-size: 0.875rem;
            color: var(--text-muted);
            margin-bottom: 22px;
        }

        .pay-stripe-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            background: #F1F5F9;
            border: 1px solid #CBD5E1;
            color: #334155;
            font-size: 0.75rem;
            font-weight: 800;
            padding: 5px 12px;
            border-radius: 3px;
            margin-bottom: 14px;
        }

        .pay-order-summary {
            background-color: #F8FAFC;
            border: 1.5px solid var(--border-light);
            border-radius: var(--radius-btn);
            padding: 14px 18px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            gap: 12px;
        }

        .pay-order-info {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .pay-order-title {
            font-weight: 800;
            font-size: 0.92rem;
            color: var(--text-dark);
        }

        .pay-order-meta {
            font-size: 0.775rem;
            color: var(--text-muted);
        }

        .pay-order-price-box {
            text-align: right;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .pay-price {
            font-size: 1.45rem;
            font-weight: 900;
            color: var(--color-accent);
            line-height: 1.1;
        }

        .pay-price-note {
            font-size: 0.7rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        .onb-step4-summary-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 14px;
            font-size: 0.85rem;
        }

        @media (max-width: 640px) {
            .pay-order-summary {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
                padding: 14px;
            }

            .pay-order-price-box {
                align-items: flex-start;
                text-align: left;
                width: 100%;
                border-top: 1px dashed #CBD5E1;
                padding-top: 10px;
            }

            .onb-step4-summary-grid {
                grid-template-columns: 1fr !important;
                gap: 10px !important;
            }
        }

        .pay-gateway-box {
            background: #FFFFFF;
            border: 1px solid #E2E8F0;
            border-radius: var(--radius-btn);
            padding: 14px 16px;
            margin-bottom: 14px;
        }

        .pay-gateway-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
            flex-wrap: wrap;
            gap: 6px;
        }

        .pay-gateway-title {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.82rem;
            font-weight: 800;
            color: var(--text-dark);
        }

        .pay-gateway-tag {
            font-size: 0.68rem;
            font-weight: 800;
            background: #ECFDF5;
            color: #047857;
            border: 1px solid #A7F3D0;
            padding: 2px 7px;
            border-radius: 4px;
            letter-spacing: 0.04em;
        }

        .pay-gateway-desc {
            font-size: 0.8rem;
            color: #64748B;
            line-height: 1.45;
            margin-bottom: 12px;
        }

        .pay-badges-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .pay-method-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            color: #334155;
        }

        .pay-legal-notice {
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: var(--radius-btn);
            padding: 11px 14px;
            margin-bottom: 16px;
        }

        .pay-legal-row {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8rem;
            font-weight: 700;
            color: #0F172A;
            margin-bottom: 5px;
        }

        .pay-legal-clause {
            font-size: 0.725rem;
            color: #64748B;
            line-height: 1.4;
        }

        .btn-pay-stripe {
            font-size: 0.98rem;
            letter-spacing: -0.01em;
            box-shadow: 0 4px 14px rgba(224, 122, 34, 0.35);
        }

        .btn-pay-stripe:hover {
            box-shadow: 0 6px 20px rgba(224, 122, 34, 0.5);
        }

        .pay-trust-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-size: 0.72rem;
            color: #94A3B8;
            margin-top: 14px;
            text-align: center;
        }

        /* FÉROVÁ GARANCE A MULTI-EMAIL STYLY PRO PLATEBNÍ KROK 4 */
        .pay-already-active-banner {
            background: #ECFDF5;
            border: 1.5px solid #A7F3D0;
            border-radius: var(--radius-btn);
            padding: 14px 16px;
            margin-bottom: 16px;
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .pay-already-active-banner h4 {
            margin: 0 0 3px 0;
            font-size: 0.9rem;
            font-weight: 800;
            color: #065F46;
        }

        .pay-already-active-banner p {
            margin: 0;
            font-size: 0.8rem;
            color: #047857;
            line-height: 1.45;
        }

        .pay-fair-guarantee {
            background: #FFFDF9;
            border: 1.5px solid #FED7AA;
            border-radius: var(--radius-btn);
            padding: 14px 16px;
            margin-bottom: 16px;
        }

        .pay-fair-head {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.84rem;
            font-weight: 800;
            color: #9A3412;
            margin-bottom: 6px;
        }

        .pay-fair-guarantee p {
            font-size: 0.8rem;
            color: #475569;
            line-height: 1.5;
            margin: 0;
        }

        .pay-fair-guarantee strong {
            color: #0F172A;
        }

        .onb-email-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            position: relative;
        }

        .btn-remove-email {
            background: #F1F5F9;
            border: 1px solid #CBD5E1;
            color: #64748B;
            width: 38px;
            height: 42px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s ease;
            flex-shrink: 0;
        }

        .btn-remove-email:hover {
            background: #FEE2E2;
            border-color: #FCA5A5;
            color: #DC2626;
        }

        .btn-add-email {
            background: #FFFFFF;
            border: 1.5px dashed #CBD5E1;
            color: #475569;
            padding: 9px 14px;
            border-radius: 8px;
            font-size: 0.82rem;
            font-weight: 700;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.15s ease;
            margin-top: 4px;
        }

        .btn-add-email:hover {
            border-color: var(--color-accent);
            color: var(--color-accent);
            background: #FFF7ED;
        }

        /* PŘED-VYHODNOCOVACÍ KARTA (PO 30. OTÁZCE) */
        .pre-eval-card {
            background: #FFFFFF;
            border: 1.5px solid #E2E8F0;
            border-radius: 16px;
            padding: 28px 24px;
            max-width: 680px;
            margin: 0 auto;
            box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
        }

        .pre-eval-header {
            text-align: center;
            margin-bottom: 22px;
        }

        .pre-eval-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #ECFDF5;
            border: 1px solid #A7F3D0;
            color: #047857;
            font-size: 0.75rem;
            font-weight: 800;
            padding: 4px 12px;
            border-radius: 999px;
            margin-bottom: 12px;
            letter-spacing: 0.03em;
        }

        .pre-eval-title {
            font-size: 1.45rem;
            font-weight: 800;
            color: #0F172A;
            margin: 0 0 8px 0;
            letter-spacing: -0.02em;
        }

        .pre-eval-subtitle {
            font-size: 0.9rem;
            color: #64748B;
            line-height: 1.5;
            margin: 0;
        }

        .pre-eval-info-box {
            background: #F8FAFC;
            border: 1px solid #E2E8F0;
            border-radius: 12px;
            padding: 16px 18px;
            margin-bottom: 18px;
        }

        .pre-eval-recipients-list {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }

        .pre-eval-chip {
            background: #FFFFFF;
            border: 1px solid #CBD5E1;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.82rem;
            font-weight: 700;
            color: #0F172A;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .pre-eval-warning {
            background: #FFF7ED;
            border: 1.5px solid #FFEDD5;
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 24px;
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .pre-eval-warning p {
            margin: 0;
            font-size: 0.82rem;
            color: #7C2D12;
            line-height: 1.5;
        }

        .pre-eval-warning strong {
            color: #431407;
        }

        .pre-eval-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .pre-eval-secondary-row {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn-pre-eval-sub {
            background: #F8FAFC;
            border: 1.5px solid #CBD5E1;
            color: #334155;
            padding: 10px 18px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .btn-pre-eval-sub:hover {
            background: #F1F5F9;
            border-color: #94A3B8;
            color: #0F172A;
        }

        /* ANIMACE ÚSPĚŠNÉ PLATBY A FAJFKY */
        .pay-success-box {
            text-align: center;
            padding: 12px 8px 6px;
            animation: payModalBounce 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes payModalBounce {
            0% { opacity: 0; transform: scale(0.92); }
            100% { opacity: 1; transform: scale(1); }
        }

        .pay-success-icon-wrap {
            width: 92px;
            height: 92px;
            margin: 0 auto 20px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle, #ECFDF5 0%, #F0FDF4 70%);
            border-radius: 50%;
            box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.12), 0 12px 28px rgba(5, 150, 105, 0.18);
            animation: payPulseRing 1.8s infinite ease-in-out;
        }

        @keyframes payPulseRing {
            0%, 100% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.12), 0 12px 28px rgba(5, 150, 105, 0.18); }
            50% { box-shadow: 0 0 0 16px rgba(16, 185, 129, 0.22), 0 16px 36px rgba(5, 150, 105, 0.28); }
        }

        .pay-success-svg {
            width: 58px;
            height: 58px;
            display: block;
        }

        .pay-success-circle {
            stroke: #10B981;
            stroke-width: 3.5;
            stroke-linecap: round;
            stroke-dasharray: 150;
            stroke-dashoffset: 150;
            animation: payDrawCircle 0.65s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards;
        }

        .pay-success-check {
            stroke: #059669;
            stroke-width: 4.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 50;
            stroke-dashoffset: 50;
            animation: payDrawCheck 0.45s cubic-bezier(0.65, 0, 0.45, 1) 0.65s forwards;
        }

        @keyframes payDrawCircle {
            100% { stroke-dashoffset: 0; }
        }

        @keyframes payDrawCheck {
            100% { stroke-dashoffset: 0; }
        }

        .pay-success-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #ECFDF5;
            border: 1px solid #A7F3D0;
            color: #065F46;
            font-size: 0.75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding: 5px 14px;
            border-radius: 3px;
            margin-bottom: 12px;
        }

        .pay-success-title {
            font-size: 1.45rem;
            font-weight: 900;
            color: #0F172A;
            margin-bottom: 8px;
            letter-spacing: -0.025em;
        }

        .pay-success-desc {
            font-size: 0.885rem;
            color: #475569;
            line-height: 1.55;
            max-width: 380px;
            margin: 0 auto 20px;
        }

        .pay-success-progress-wrap {
            height: 5px;
            background: #E2E8F0;
            border-radius: 3px;
            overflow: hidden;
            max-width: 260px;
            margin: 0 auto 10px;
        }

        .pay-success-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #10B981, #059669);
            width: 0%;
            border-radius: 3px;
            animation: payProgressFill 1.1s ease-in-out 0.2s forwards;
        }

        @keyframes payProgressFill {
            0% { width: 0%; }
            100% { width: 100%; }
        }

        .pay-success-hint {
            font-size: 0.75rem;
            color: #94A3B8;
            font-weight: 600;
        }

        .modal-fade-out {
            opacity: 0 !important;
            transform: scale(0.96) !important;
            transition: opacity 0.28s ease, transform 0.28s ease;
        }


        /* Responzivní pravidla */
        @media (max-width: 780px) {
            .hero-split-grid {
                grid-template-columns: 1fr;
            }

            .hero-left-angled {
                clip-path: none;
                margin-right: 0;
                padding: 34px 24px;
            }

            .hero-right-angled {
                border-left: none;
                border-top: 1px solid var(--border-light);
                padding: 24px;
            }

            .hero-right-angled img {
                max-width: 220px;
            }

            .hero-title-angled {
                font-size: 1.7rem;
            }

            .story-row-card {
                grid-template-columns: 1fr;
                min-height: auto;
            }

            .story-img-cell {
                border-right: none;
                border-bottom: 1px solid var(--border-light);
                padding: 18px;
                height: 120px;
            }

            .question-box {
                padding: 24px 18px;
            }

            .preview-cta-card {
                padding: 24px 20px;
                flex-direction: column;
                align-items: stretch;
                gap: 20px;
            }

            .preview-cta-card-left {
                flex-direction: column;
                align-items: flex-start;
                gap: 14px;
            }

            .preview-cta-action .btn-diagonal {
                width: 100%;
                justify-content: center;
            }
        }

/* ==========================================================================
   UPGRADED STEP 0 ONBOARDING ("AI PÁKA")
   ========================================================================== */
.onb-ai-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border: 1px solid #FDE68A;
    border-radius: 4px;
    padding: 14px 16px;
    margin-bottom: 24px;
    color: #78350F;
    font-size: 0.86rem;
    line-height: 1.5;
}
.onb-ai-banner svg {
    flex-shrink: 0;
    color: #D97706;
    margin-top: 2px;
}
.onb-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 22px;
}
@media (max-width: 640px) {
    .onb-row-2 {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
.onb-text-input {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 15px;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--text-dark);
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: var(--radius-btn, 8px);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.onb-text-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(224, 122, 34, 0.15);
}
.onb-text-input::placeholder {
    color: #94A3B8;
    font-weight: 400;
}
.onb-sub-hint {
    display: block;
    font-size: 0.78rem;
    color: #64748B;
    margin-top: 5px;
    line-height: 1.4;
}
.onb-optional-pill {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 3px;
    background: #F1F5F9;
    color: #64748B;
    margin-left: 6px;
    vertical-align: middle;
}

/* ==========================================================================
   STEPPED ONBOARDING (KROKY 0-3), PROTOCOL BRIEFING & WHY-EXPLAINERS
   ========================================================================== */
.onb-briefing-wrap {
    animation: fadeIn 0.3s ease;
}

.onb-school-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.onb-school-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.onb-school-icon {
    width: auto;
    height: auto;
    color: #4F46E5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.onb-school-title {
    font-size: 0.94rem;
    color: #0F172A;
    display: block;
    margin-bottom: 2px;
}

.onb-school-desc {
    font-size: 0.82rem;
    color: #64748B;
    line-height: 1.4;
}

.onb-school-btn {
    padding: 9px 18px;
    background: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    color: #0F172A;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.onb-school-btn:hover {
    background: #EEF2FF;
    border-color: #A5B4FC;
    color: #4338CA;
}

.onb-protocol-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 20px 0 24px 0;
}

.onb-protocol-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.onb-protocol-card:hover {
    border-color: #CBD5E1;
}

.onb-protocol-card.rule-1 { border-left: 4px solid var(--color-accent); }
.onb-protocol-card.rule-2 { border-left: 4px solid #3B82F6; }
.onb-protocol-card.rule-3 { border-left: 4px solid #10B981; }

.onb-protocol-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.rule-1 .onb-protocol-icon { color: var(--color-accent); }
.rule-2 .onb-protocol-icon { color: #2563EB; }
.rule-3 .onb-protocol-icon { color: #059669; }

.onb-protocol-body {
    flex: 1;
}

.onb-protocol-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 4px;
    line-height: 1.35;
}

.onb-protocol-desc {
    font-size: 0.86rem;
    color: #475569;
    line-height: 1.5;
}

.onb-prep-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 4px;
    padding: 14px 16px;
    font-size: 0.86rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 24px;
}

.onb-prep-box svg {
    flex-shrink: 0;
    color: var(--color-accent);
    margin-top: 2px;
}

/* OSOBNÍ VZKAZ ZAKLADATELE V ONBOARDINGU KROK 0 */
.onb-founder-note {
    background: #FFF7ED;
    border: 1.5px solid #FFEDD5;
    border-left: 4px solid var(--color-accent);
    border-radius: 4px;
    padding: 18px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.onb-founder-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #FFFFFF;
    box-shadow: 0 4px 12px rgba(224, 122, 34, 0.14);
    background: #FFFFFF;
}

.onb-founder-text {
    flex: 1;
}

.onb-founder-tag {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: 4px;
}

.onb-founder-quote {
    font-size: 0.88rem;
    color: #334155;
    line-height: 1.55;
    font-style: italic;
    margin-bottom: 6px;
}

.onb-founder-sign {
    font-size: 0.78rem;
    color: #64748B;
}

/* ========================================================== */
/* AUTENTICKÁ KARTA PRO UČITELE & PEDAGOGY (#ucitelView)      */
/* ========================================================== */
.teacher-portal-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-top: 4px solid #4F46E5;
    border-radius: 18px;
    padding: 38px 42px 34px;
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.05);
    margin: 8px 0 36px 0;
}

@media (max-width: 640px) {
    .teacher-portal-card {
        padding: 24px 18px;
    }
}

.teacher-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #4F46E5;
    margin-bottom: 12px;
}

.teacher-portal-title {
    font-size: 1.75rem;
    font-weight: 850;
    color: #0F172A;
    letter-spacing: -0.025em;
    line-height: 1.25;
    margin: 0 0 10px 0;
}

.teacher-portal-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 28px 0;
    max-width: 700px;
}

.teacher-login-box {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    padding: 26px 28px;
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .teacher-login-box {
        padding: 18px 16px;
    }
}

.teacher-input-label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 8px;
}

.teacher-input-group {
    position: relative;
    width: 100%;
    margin-bottom: 14px;
}

.teacher-key-input {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #0F172A;
    background: #FFFFFF;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.teacher-key-input:focus {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
    outline: none;
}

.teacher-error-msg {
    color: #DC2626;
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 14px;
}

.teacher-btn-enter {
    width: 100%;
    justify-content: center;
    background: #4F46E5 !important;
    padding: 13px 22px;
    font-size: 0.95rem;
    font-weight: 700;
    transition: background 0.2s ease, transform 0.2s ease;
}

.teacher-btn-enter:hover {
    background: #4338CA !important;
}

.teacher-contact-note {
    font-size: 12.5px;
    color: #64748B;
    margin-top: 14px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.teacher-contact-note a {
    color: #4F46E5;
    font-weight: 700;
    text-decoration: none;
}

.teacher-contact-note a:hover {
    text-decoration: underline;
}

/* ========================================================== */
/* MODERNÍ HUB PRO ŠKOLY A KARIÉROVÉ PORADCE                  */
/* ========================================================== */
.schools-hub-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-top: 4px solid #4F46E5;
    border-radius: 18px;
    padding: 42px 44px;
    margin: 20px 0 40px 0;
    box-shadow: 0 10px 36px -8px rgba(15, 23, 42, 0.06);
    position: relative;
}

.schools-top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.schools-live-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #047857;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.schools-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.schools-hero-block {
    margin-bottom: 34px;
}

.schools-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    color: #4338CA;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.schools-hero-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #0F172A;
    line-height: 1.22;
    letter-spacing: -0.025em;
    margin: 0 0 16px 0;
    max-width: 860px;
}

.schools-hero-lead {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.62;
    margin: 0 0 26px 0;
    max-width: 800px;
}

.schools-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.btn-schools-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
    color: #FFFFFF;
    font-size: 0.95rem;
    font-weight: 800;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
    transition: all 0.18s ease;
}

.btn-schools-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.38);
    background: linear-gradient(135deg, #4338CA 0%, #3730A3 100%);
    color: #FFFFFF;
}

.btn-schools-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    background: #F8FAFC;
    color: #0F172A;
    border: 1.5px solid #CBD5E1;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.16s ease;
}

.btn-schools-secondary:hover {
    background: #FFFFFF;
    border-color: #94A3B8;
    transform: translateY(-1px);
    color: #0F172A;
}

.btn-schools-ghost {
    font-size: 0.92rem;
    font-weight: 700;
    color: #4F46E5;
    text-decoration: none;
    padding: 10px 14px;
    transition: color 0.15s ease;
}

.btn-schools-ghost:hover {
    color: #3730A3;
    text-decoration: underline;
}

/* 4 STAT BENTO */
.schools-stat-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 38px;
}

.schools-stat-item {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.schools-stat-item:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
    background: #FFFFFF;
}

.schools-stat-num {
    font-size: 1.5rem;
    font-weight: 900;
    color: #4F46E5;
    line-height: 1.2;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.schools-stat-num span {
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748B;
}

.schools-stat-label {
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.45;
    font-weight: 500;
}

/* INTERAKTIVNÍ SANDBOX / ŽIVÝ SYSTÉM BENTO */
.schools-live-showcase-box {
    background: linear-gradient(135deg, #F8FAFC 0%, #EEF2FF 100%);
    border: 1.5px solid #C7D2FE;
    border-radius: 16px;
    padding: 32px 30px;
    margin-bottom: 44px;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.05);
}

.schools-live-showcase-header {
    margin-bottom: 22px;
}

.schools-live-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #C7D2FE;
    color: #4338CA;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.schools-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4F46E5;
    animation: pulse 1.8s infinite;
}

.schools-showcase-title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #0F172A;
    letter-spacing: -0.02em;
    margin: 0 0 8px 0;
}

.schools-showcase-desc {
    font-size: 0.94rem;
    color: #475569;
    margin: 0;
    line-height: 1.55;
    max-width: 720px;
}

.schools-sandbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.schools-sandbox-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.schools-sandbox-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
}

.schools-sandbox-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.schools-sandbox-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.schools-sandbox-icon.icon-purple {
    background: #EEF2FF;
    color: #4F46E5;
}

.schools-sandbox-icon.icon-emerald {
    background: #ECFDF5;
    color: #059669;
}

.schools-sandbox-badge {
    font-size: 0.74rem;
    font-weight: 700;
    color: #4F46E5;
    background: #EEF2FF;
    padding: 3px 10px;
    border-radius: 999px;
}

.schools-sandbox-badge.badge-green {
    color: #047857;
    background: #ECFDF5;
}

.schools-sandbox-heading {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 8px 0;
    letter-spacing: -0.01em;
}

.schools-sandbox-p {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.55;
    margin: 0 0 16px 0;
    flex: 1;
}

.schools-sandbox-preview-box {
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sandbox-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
}

.preview-lbl {
    color: #64748B;
}

.preview-val {
    color: #0F172A;
    font-weight: 700;
}

.preview-code {
    background: #EEF2FF;
    color: #4338CA;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    font-family: monospace;
    font-size: 0.85rem;
}

.btn-schools-demo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 18px;
    background: #4F46E5;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.9rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.16s ease;
    width: 100%;
}

.btn-schools-demo:hover {
    background: #4338CA;
    transform: translateY(-1px);
}

.btn-schools-demo.btn-demo-student {
    background: #059669;
}

.btn-schools-demo.btn-demo-student:hover {
    background: #047857;
}

/* SEKČNÍ OBAL PRO ŠKOLY */
.schools-section-wrap {
    margin-bottom: 46px;
}

.schools-sec-header {
    margin-bottom: 24px;
}

.schools-sec-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #4F46E5;
    margin-bottom: 6px;
}

.schools-sec-badge.badge-emerald {
    color: #059669;
}

.schools-sec-badge.badge-orange {
    color: #EA580C;
}

.schools-sec-badge.badge-purple {
    color: #7C3AED;
}

.schools-sec-badge.badge-blue {
    color: #0284C7;
}

.schools-sec-title {
    font-size: 1.55rem;
    font-weight: 900;
    color: #0F172A;
    letter-spacing: -0.02em;
    margin: 0 0 6px 0;
    line-height: 1.28;
}

.schools-sec-desc {
    font-size: 0.94rem;
    color: #475569;
    margin: 0;
    line-height: 1.58;
    max-width: 760px;
}

/* 3 PILÍŘE */
.schools-three-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.pillar-card {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.pillar-card:hover {
    background: #FFFFFF;
    border-color: #CBD5E1;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.pillar-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.pillar-icon-box.icon-purple {
    background: #EEF2FF;
    color: #4F46E5;
}

.pillar-icon-box.icon-indigo {
    background: #F0F9FF;
    color: #0284C7;
}

.pillar-icon-box.icon-orange {
    background: #FFF7ED;
    color: #EA580C;
}

.pillar-step-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.pillar-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 14px 0;
    line-height: 1.35;
}

.pillar-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.48;
}

.pillar-feature-list li {
    position: relative;
    padding-left: 16px;
}

.pillar-feature-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #4F46E5;
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1;
}

.pillar-feature-list strong {
    color: #0F172A;
}

/* 4 KROKOVÝ PROCES */
.schools-timeline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.timeline-step-box {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 22px 18px;
    position: relative;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.timeline-step-box:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
    background: #FFFFFF;
}

.timeline-step-num {
    font-size: 1.6rem;
    font-weight: 900;
    color: #4F46E5;
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.85;
}

.timeline-step-title {
    font-size: 0.98rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 6px 0;
    line-height: 1.35;
}

.timeline-step-desc {
    font-size: 0.83rem;
    color: #475569;
    line-height: 1.48;
    margin: 0;
}

/* FINANCOVÁNÍ OP JAK */
.schools-opjak-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}

.schools-opjak-card {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.schools-opjak-card:hover {
    border-color: #A7F3D0;
    transform: translateY(-2px);
    background: #FFFFFF;
}

.schools-opjak-tag {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #047857;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    padding: 3px 8px;
    border-radius: 4px;
    align-self: flex-start;
    margin-bottom: 12px;
}

.schools-opjak-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 8px;
    line-height: 1.35;
}

.schools-opjak-desc {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.schools-pilot-banner {
    background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%);
    border: 1.5px solid #A7F3D0;
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 20px;
}

.pilot-banner-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #059669;
    color: #FFFFFF;
    font-size: 0.74rem;
    font-weight: 800;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.pilot-banner-content {
    flex: 1;
}

.pilot-banner-main {
    font-size: 0.92rem;
    color: #065F46;
    line-height: 1.5;
    margin-bottom: 6px;
}

.pilot-banner-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #047857;
    line-height: 1.45;
}

.pilot-banner-sub svg {
    flex-shrink: 0;
}

/* GDPR KARTY */
.schools-gdpr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.schools-gdpr-card {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 22px 20px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.schools-gdpr-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
    background: #FFFFFF;
}

.schools-gdpr-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.schools-gdpr-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: #EEF2FF;
    color: #4F46E5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.schools-gdpr-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-dark);
}

.schools-gdpr-desc {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.55;
    margin: 0;
}

/* ZÁVĚREČNÝ CTA BOX */
.schools-cta-card {
    background: linear-gradient(135deg, #1E1B4B 0%, #312E81 100%);
    border-radius: 16px;
    padding: 38px 36px;
    color: #FFFFFF;
    margin-top: 20px;
    box-shadow: 0 10px 30px rgba(30, 27, 75, 0.2);
}

.schools-cta-pill {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #A5B4FC;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.schools-cta-card-title {
    font-size: 1.65rem;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.schools-cta-card-desc {
    font-size: 0.95rem;
    color: #C7D2FE;
    line-height: 1.62;
    max-width: 760px;
    margin: 0 0 24px 0;
}

.schools-cta-btn-cluster {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.btn-cta-large {
    background: #E07A22 !important;
    color: #FFFFFF !important;
    font-size: 0.98rem !important;
    padding: 14px 26px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 16px rgba(224, 122, 34, 0.35) !important;
}

.btn-cta-large:hover {
    background: #C2410C !important;
    transform: translateY(-2px) !important;
}

.schools-cta-footer-note {
    font-size: 0.85rem;
    color: #A5B4FC;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.schools-cta-footer-note a {
    color: #FFFFFF;
    text-decoration: underline;
    font-weight: 700;
}

@media (max-width: 960px) {
    .schools-three-pillars {
        grid-template-columns: 1fr;
    }
    .schools-stat-bento {
        grid-template-columns: repeat(2, 1fr);
    }
    .schools-timeline-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .schools-opjak-grid {
        grid-template-columns: 1fr;
    }
    .schools-gdpr-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .schools-hub-card {
        padding: 24px 18px;
        border-radius: 14px;
        margin: 12px 0 28px 0;
    }
    .schools-hero-title {
        font-size: 1.55rem;
    }
    .schools-hero-lead {
        font-size: 0.92rem;
    }
    .schools-sandbox-grid {
        grid-template-columns: 1fr;
    }
    .schools-pilot-banner {
        flex-direction: column;
        gap: 10px;
    }
    .schools-cta-card {
        padding: 24px 20px;
    }
    .schools-cta-card-title {
        font-size: 1.3rem;
    }
    .schools-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-schools-primary, .btn-schools-secondary {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .schools-stat-bento {
        grid-template-columns: 1fr;
    }
    .schools-timeline-grid {
        grid-template-columns: 1fr;
    }
}

/* SLOVO ZAKLADATELE NA HOMEPAGE */
.landing-founder-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-left: 4px solid var(--color-accent);
    border-radius: 4px;
    padding: 24px 28px;
    margin: 32px 0 28px 0;
    display: flex;
    align-items: center;
    gap: 22px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.landing-founder-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
}

.landing-founder-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #FFF7ED;
    box-shadow: 0 4px 14px rgba(224, 122, 34, 0.16);
    background: #FFF7ED;
}

.landing-founder-content {
    flex: 1;
}

.landing-founder-tag {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-accent);
    margin-bottom: 5px;
}

.landing-founder-quote {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 8px;
}

.landing-founder-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.85rem;
}

.landing-founder-author {
    color: #475569;
}

.landing-founder-link {
    color: var(--color-accent);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.15s ease;
}

.landing-founder-link:hover {
    color: #C2410C;
    text-decoration: underline;
}

/* KARTA PRO ŠKOLY NA HOMEPAGE */
.landing-schools-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-left: 4px solid #2563EB;
    border-radius: 4px;
    padding: 24px 28px;
    margin: 20px 0 28px 0;
    display: flex;
    align-items: center;
    gap: 22px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.landing-schools-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
}

.landing-schools-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #EFF6FF;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.16);
    background: #EFF6FF;
}

.landing-schools-content {
    flex: 1;
    min-width: 0;
}

.landing-schools-tag {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2563EB;
    margin-bottom: 5px;
}

.landing-schools-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 6px 0;
    line-height: 1.35;
}

.landing-schools-desc {
    font-size: 0.88rem;
    color: var(--text-body);
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.landing-schools-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.landing-schools-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563EB;
    color: #FFFFFF;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.16s ease, transform 0.14s ease;
}

.landing-schools-btn:hover {
    background: #1D4ED8;
    transform: translateY(-1px);
}

.landing-schools-subnote {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}

@media (max-width: 640px) {
    .onb-founder-note {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .landing-founder-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 18px;
        gap: 14px;
    }
    .landing-schools-card {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 18px;
        gap: 14px;
    }
    .landing-schools-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }
    .landing-schools-btn {
        width: 100%;
        justify-content: center;
    }
}

/* KROKOVÝ INDIKÁTOR (1 ZE 3, 2 ZE 3, 3 ZE 3) */
.onb-steps-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 10px 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
}

.onb-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #94A3B8;
}

.onb-step-item.active {
    color: var(--color-accent);
}

.onb-step-item.completed {
    color: #10B981;
}

.onb-step-num {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    font-weight: 800;
    background: #E2E8F0;
    color: #64748B;
    transition: all 0.2s ease;
}

.onb-step-item.active .onb-step-num {
    background: var(--color-accent);
    color: #FFFFFF;
}

.onb-step-item.completed .onb-step-num {
    background: #10B981;
    color: #FFFFFF;
}

.onb-step-line {
    flex: 1;
    height: 2px;
    background: #E2E8F0;
    border-radius: 2px;
    transition: background 0.2s ease;
}

.onb-step-line.completed {
    background: #10B981;
}

/* VYSVĚTLIVKY: "PROČ TUTO INFORMACI CHCEME?" */
.onb-why-wrapper {
    margin-top: 6px;
    margin-bottom: 2px;
}

.onb-why-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    padding: 3px 0;
    font-size: 0.79rem;
    font-weight: 700;
    color: #64748B;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease;
}

.onb-why-toggle:hover {
    color: var(--color-accent);
}

.onb-why-toggle svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.onb-why-wrapper.is-open .onb-why-chevron {
    transform: rotate(180deg);
}

.onb-why-wrapper.is-open .onb-why-toggle {
    color: var(--color-accent);
}

.onb-why-content {
    display: none;
    padding: 10px 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-left: 3px solid var(--color-accent);
    border-radius: 4px;
    font-size: 0.825rem;
    line-height: 1.5;
    color: #475569;
    margin-top: 6px;
    animation: fadeIn 0.2s ease;
}

.onb-why-wrapper.is-open .onb-why-content {
    display: block;
}

/* NAVIGAČNÍ TLAČÍTKA V KROCÍCH */
.onb-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

.btn-onb-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 4px;
    color: #475569;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.btn-onb-back:hover {
    background: #F1F5F9;
    color: var(--text-dark);
    border-color: #94A3B8;
}

@media (max-width: 600px) {
    .onb-nav-row {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .onb-nav-row button {
        width: 100%;
        justify-content: center;
    }
    .onb-step-item .onb-step-label {
        display: none;
    }
}

/* ==========================================================================
   FAQ ACCORDION, 100% GARANCE SPOKOJENOSTI & O PROJEKTU STYLY
   ========================================================================== */
.faq-preview-section {
    margin-top: 56px;
    margin-bottom: 24px;
}

.faq-section-header {
    text-align: center;
    margin-bottom: 28px;
}

.faq-section-eyebrow {
    font-size: 11px;
    font-weight: 700;
    color: #E07A22;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.faq-title-wrap {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

.faq-qmark {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.faq-q1 {
    top: -10px;
    left: -42px;
    opacity: 0.60;
    transform: rotate(-14deg);
}

.faq-q2 {
    top: -26px;
    left: 24px;
    opacity: 0.22;
    transform: rotate(14deg);
}

.faq-q3 {
    bottom: -4px;
    left: -30px;
    opacity: 0.35;
    transform: rotate(-22deg);
}

.faq-q-extra-l {
    top: 14px;
    left: -56px;
    opacity: 0.18;
    transform: rotate(10deg);
}

.faq-q4 {
    top: -14px;
    right: -46px;
    opacity: 0.72;
    transform: rotate(16deg);
}

.faq-q5 {
    top: -24px;
    right: 32px;
    opacity: 0.26;
    transform: rotate(-12deg);
}

.faq-q6 {
    bottom: -6px;
    right: -34px;
    opacity: 0.42;
    transform: rotate(20deg);
}

.faq-q-extra-r {
    top: 16px;
    right: -60px;
    opacity: 0.20;
    transform: rotate(-16deg);
}

@media (max-width: 640px) {
    .faq-q-extra-l,
    .faq-q-extra-r {
        display: none !important;
    }
    .faq-q1 {
        left: -20px !important;
        top: -18px !important;
        width: 22px !important;
        height: 22px !important;
    }
    .faq-q3 {
        left: -14px !important;
        bottom: 2px !important;
    }
    .faq-q4 {
        right: -22px !important;
        top: -20px !important;
        width: 24px !important;
        height: 24px !important;
    }
    .faq-q6 {
        right: -16px !important;
        bottom: 0px !important;
    }
}

.faq-section-title {
    font-size: 1.65rem;
    font-weight: 850;
    color: var(--text-dark);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.faq-section-sub {
    font-size: 0.92rem;
    color: var(--text-body);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.55;
}

/* ========================================================== */
/* MODERN CARD-BASED FAQ ACCORDION                           */
/* ========================================================== */
.faq-accordion {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-width: 820px;
    margin: 0 auto 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.faq-item:last-child {
    border-bottom: 1.5px solid #E2E8F0;
}

.faq-item:hover {
    background-color: #FFFFFF;
    border-color: #CBD5E1;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    transform: translateY(-1px);
}

.faq-item.is-open {
    background: #FFFFFF;
    border-color: #FDBA74;
    box-shadow: 0 8px 24px rgba(224, 122, 34, 0.08);
}

.faq-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 800;
    color: #0F172A;
    transition: color 0.15s ease;
}

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

.faq-item.is-open .faq-header {
    color: var(--color-accent);
}

.faq-chevron {
    width: 20px;
    height: 20px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: #94A3B8;
    flex-shrink: 0;
    transition: transform 0.22s ease, color 0.15s ease;
}

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

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

.faq-body {
    display: none;
    padding: 18px 22px 22px 22px;
    font-size: 0.94rem;
    line-height: 1.7;
    color: #334155;
    border-top: 1px solid #F1F5F9;
    animation: fadeIn 0.2s ease;
}

.faq-item.is-open .faq-body {
    display: block;
}

.faq-body p {
    margin-bottom: 12px;
}

.faq-body p:last-child {
    margin-bottom: 0;
}

.faq-body strong {
    color: #0F172A;
}

/* DECENTNÍ LIŠTA DŮVĚRY (ČISTÁ BEZ BAREVNÝCH POZADÍ IKON) */
.clean-trust-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 20px;
    margin: 20px auto 28px;
    max-width: 820px;
}

.clean-trust-icon {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clean-trust-text {
    font-size: 0.90rem;
    color: #475569;
    line-height: 1.5;
}

.clean-trust-text strong {
    color: #0F172A;
    display: block;
    font-size: 0.96rem;
    margin-bottom: 2px;
}

/* KARTA B2B PRO ŠKOLY A PEDAGOGY */
.school-b2b-card {
    background: #0F172A;
    border: 1.5px solid #1E293B;
    border-left: 5px solid #38BDF8;
    border-radius: 4px;
    padding: 32px 36px;
    margin: 36px 0;
    color: #FFFFFF;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.2);
}

.school-b2b-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #38BDF8;
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 12px;
}

.school-b2b-title {
    font-size: 1.45rem;
    font-weight: 900;
    color: #FFFFFF;
    margin-bottom: 10px;
    line-height: 1.3;
}

.school-b2b-desc {
    font-size: 0.93rem;
    color: #94A3B8;
    line-height: 1.65;
    margin-bottom: 22px;
    max-width: 780px;
}

.school-b2b-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-school-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: #38BDF8;
    color: #0F172A;
    font-weight: 800;
    font-size: 0.92rem;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.18s ease;
    border: none;
    cursor: pointer;
}

.btn-school-action:hover {
    background: #7DD3FC;
    transform: translateY(-1px);
}

.btn-school-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.08);
    color: #E2E8F0;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.18s ease;
}

.btn-school-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #FFFFFF;
}

/* PILÍŘE PROJEKTU (O PROJEKTU) */
#oProjektuView .strategy-slot-card .slot-num-badge {
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.80rem;
    font-weight: 850;
    letter-spacing: 0.07em;
}

#oProjektuView .strategy-slot-card .slot-num-badge.slot-1 { color: #E07A22; }
#oProjektuView .strategy-slot-card .slot-num-badge.slot-2 { color: #0284C7; }
#oProjektuView .strategy-slot-card .slot-num-badge.slot-3 { color: #059669; }

#oProjektuView .strategy-slot-card .slot-example-tag {
    background: transparent;
    border: 1px solid #E2E8F0;
}

@media (max-width: 820px) {
    .story-pillar-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .school-b2b-card {
        padding: 24px 20px;
    }
    .guarantee-badge-box {
        flex-direction: column;
        gap: 14px;
        padding: 20px 18px;
    }
    .team-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .billing-details-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* TÝM PROJEKTU (O PROJEKTU) */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0 28px;
}

.team-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 4px;
    padding: 22px 20px;
    transition: transform 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
}

.team-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
}

.team-avatar-img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 14px;
    border: 2px solid #FFFFFF;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    background: #F8FAFC;
    transition: transform 0.22s ease;
}

.team-card:hover .team-avatar-img {
    transform: scale(1.06);
}

.team-avatar-initials {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 900;
    margin-bottom: 14px;
}

.initials-adam { background: #FFF7ED; color: var(--color-accent); }
.initials-romana { background: #EFF6FF; color: #2563EB; }
.initials-antonin { background: #ECFDF5; color: #059669; }

.team-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 3px;
}

.team-role {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.team-bio {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.55;
}

/* PŘÍBĚH ZAKLADATELE (FOUNDER SPOTLIGHT) */
.founder-spotlight-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-top: 4px solid var(--color-accent);
    border-radius: 4px;
    padding: 38px 40px 34px;
    margin-bottom: 36px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.founder-spotlight-header {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid #F1F5F9;
}

.founder-spotlight-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFF7ED;
    box-shadow: 0 8px 22px rgba(224, 122, 34, 0.16);
    flex-shrink: 0;
    background: #FFF7ED;
}

.founder-clean-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent);
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 8px;
}

.founder-badge-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 11px;
    border-radius: 3px;
    background: #FFF7ED;
    color: var(--color-accent);
    border: 1px solid #FFEDD5;
    margin-bottom: 6px;
}

.founder-title-name {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.2;
    margin: 0 0 4px 0;
}

.founder-role-sub {
    font-size: 0.88rem;
    color: #64748B;
    font-weight: 600;
}

.founder-lead-quote {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.55;
    color: #1E293B;
    font-style: italic;
    margin-bottom: 24px;
    padding: 16px 22px;
    background: #F8FAFC;
    border-left: 3.5px solid var(--color-accent);
    border-radius: 3px;
}

.founder-story-body {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #334155;
}

.founder-story-body p {
    margin-bottom: 18px;
}

.founder-story-body p:last-child {
    margin-bottom: 0;
}

.founder-story-body strong {
    color: var(--text-dark);
}

.founder-signature {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.founder-signature-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
}

.founder-signature-role {
    font-size: 0.82rem;
    color: #64748B;
}

/* PODPŮRNÝ TÝM A ZÁZEMÍ */
.team-support-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 18px 0 32px;
}

.team-support-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 4px;
    padding: 22px 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.team-support-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
}

.team-support-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #FFFFFF;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.team-support-info {
    flex: 1;
}

.team-support-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.team-support-role {
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.team-support-role.role-blue { color: #0284C7; }
.team-support-role.role-green { color: #059669; }

.team-support-bio {
    font-size: 0.86rem;
    color: #475569;
    line-height: 1.55;
}

@media (max-width: 768px) {
    .founder-spotlight-card {
        padding: 24px 20px;
    }
    .founder-spotlight-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .team-support-grid {
        grid-template-columns: 1fr;
    }
}

/* FAKTURAČNÍ A IDENTIFIKAČNÍ ÚDAJE (KONTAKT & O PROJEKTU) */
.billing-details-box {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
    padding: 26px 28px;
    margin-top: 36px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.billing-details-box:hover {
    border-color: #CBD5E1;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.billing-details-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.billing-details-header h3 {
    font-size: 1.15rem;
    font-weight: 850;
    color: var(--text-dark);
    margin: 0;
}

.billing-details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 28px;
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .billing-details-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

.billing-item strong {
    color: var(--text-dark);
}

/* PATIČKA - LEGAL BAR */
.footer-legal-bar {
    max-width: 960px;
    margin: 20px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ==========================================================================
   RESULT SHELL (.rs-*) — PROFESIONÁLNÍ PSYCHOLOGICKÝ POSUDEK A VIZUALIZACE
   ========================================================================== */
.page-container:has(.rs) {
    max-width: 1180px;
}
.question-box:has(.rs) {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}
.rs {
    --rs-ink: #0F172A;
    --rs-ink-soft: #334155;
    --rs-muted: #64748B;
    --rs-faint: #94A3B8;
    --rs-paper: #F8FAFC;
    --rs-paper-warm: #F1F5F9;
    --rs-card: #FFFFFF;
    --rs-line: #E2E8F0;
    --rs-line-strong: #CBD5E1;
    --rs-brand: #0F172A;
    --rs-brand-soft: #F1F5F9;
    --rs-accent: #C85A17;
    --rs-accent-soft: #FFF7ED;
    --rs-serif: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --rs-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --rs-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --rs-r-sm: 2px;
    --rs-r-md: 4px;
    --rs-r-lg: 4px;
    --rs-r-xl: 6px;
    --rs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
    --rs-shadow-md: 0 6px 20px -4px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    --rs-shadow-lg: 0 20px 44px -12px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.05);

    color: var(--rs-ink);
    font-family: var(--rs-sans);
    font-size: 16px;
    line-height: 1.65;
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 64px;
    -webkit-font-smoothing: antialiased;
}
.rs *, .rs *::before, .rs *::after {
    box-sizing: border-box;
}

/*Top status strip inside rs*/
.rs-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: #FFFFFF;
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-lg);
    margin-bottom: 18px;
    box-shadow: var(--rs-shadow-sm);
}
.rs-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rs-ink-soft);
}
.rs-topbar-sep {
    color: #94A3B8;
    margin: 0 4px;
    font-weight: 400;
}
.rs-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16);
}
.rs-topbar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rs-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    color: var(--rs-ink-soft);
}

/* ---------- PROMINENT ACTION BANNER (EMAIL & PRINT) ---------- */
.rs-action-banner {
    background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
    border: 1.5px solid #E2E8F0;
    border-left: 5px solid #059669;
    border-radius: var(--rs-r-lg, 12px);
    padding: 22px 28px;
    margin-bottom: 22px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.rs-action-banner-main {
    flex: 1;
    min-width: 0;
}
.rs-action-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #065F46;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.rs-action-title {
    font-size: 20px;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0 0 6px 0;
}
.rs-action-desc {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}
.rs-action-btns {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.rs-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 700;
    padding: 13px 22px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    user-select: none;
}
.rs-action-btn:active {
    transform: scale(0.98);
}
.rs-action-btn-email {
    background: #059669;
    color: #FFFFFF;
}
.rs-action-btn-email:hover {
    background: #047857;
    transform: translateY(-1.5px);
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.32);
}
.rs-action-btn-print {
    background: #0F172A;
    color: #FFFFFF;
}
.rs-action-btn-print:hover {
    background: #1E293B;
    transform: translateY(-1.5px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.28);
}

@media (max-width: 820px) {
    .rs-action-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 18px 18px;
        gap: 16px;
    }
    .rs-action-btns {
        flex-direction: column;
        width: 100%;
    }
    .rs-action-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 18px;
    }
    .rs-action-title {
        font-size: 18px;
    }
}

/* ---------- EMAIL REPORT MODAL ---------- */
.email-report-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.email-report-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: emailModalFade 0.2s ease-out;
}
.email-report-modal-box {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 30px 28px;
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.25);
    animation: emailModalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}
@keyframes emailModalFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes emailModalPop {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.email-report-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: #64748B;
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.email-report-modal-close:hover {
    background: #F1F5F9;
    color: #0F172A;
}
.email-report-modal-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.email-report-modal-icon {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent !important;
    border: none !important;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.email-report-modal-icon svg {
    width: 28px;
    height: 28px;
}
.email-report-modal-title {
    font-size: 19px;
    font-weight: 800;
    color: #0F172A;
    margin: 0 0 6px 0;
    letter-spacing: -0.015em;
}
.email-report-modal-sub {
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.5;
    margin: 0;
}
.email-report-form-group {
    margin-bottom: 16px;
}
.email-report-form-group label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 7px;
}
.email-report-input {
    width: 100%;
    padding: 13px 16px;
    font-size: 15px;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    background: #FFFFFF;
    color: #0F172A;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.email-report-input:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15);
}
.email-report-msg {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1.45;
}
.email-report-msg.is-success {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #065F46;
}
.email-report-msg.is-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
}
.email-report-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.email-report-btn-secondary {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.email-report-btn-secondary:hover {
    background: #E2E8F0;
    color: #0F172A;
}
.email-report-btn-primary {
    background: #059669;
    border: none;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
    transition: background 0.15s, transform 0.15s;
}
.email-report-btn-primary:hover:not(:disabled) {
    background: #047857;
    transform: translateY(-1px);
}
.email-report-btn-primary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ---------- BENTO HERO ---------- */
.rs-hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.rs-hero-main {
    background: var(--rs-card);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-xl);
    padding: 36px 36px 32px;
    box-shadow: var(--rs-shadow-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.rs-hero-main::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0F172A 0%, #C85A17 55%, #F59E0B 100%);
}
.rs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rs-accent);
    margin-bottom: 14px;
}
.rs-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--rs-accent);
    box-shadow: 0 0 0 4px var(--rs-accent-soft);
}
.rs-hero-code {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--rs-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--rs-ink);
    background: var(--rs-paper-warm);
    border: 1px solid var(--rs-line-strong);
    padding: 6px 13px;
    border-radius: 3px;
    margin-bottom: 16px;
    align-self: flex-start;
}
.rs-hero-code strong {
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--rs-accent);
}
.rs-hero h1 {
    font-family: var(--rs-serif);
    font-weight: 900;
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.14;
    letter-spacing: -0.025em;
    color: var(--rs-ink);
    margin: 0 0 14px;
}
.rs-hero-sub {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--rs-ink-soft);
    margin: 0 0 24px;
}
.rs-hero-viz {
    background: var(--rs-card);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-xl);
    padding: 26px 24px 22px;
    box-shadow: var(--rs-shadow-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.rs-hero-viz-caption {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--rs-muted);
    margin-bottom: 6px;
}
.rs-radar {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    overflow: visible;
}
.rs-radar .rs-grid {
    fill: none;
    stroke: var(--rs-line);
    stroke-width: 1;
}
.rs-radar .rs-grid-outer {
    fill: var(--rs-paper);
    stroke: var(--rs-line-strong);
    stroke-width: 1.25;
}
.rs-radar .rs-axis {
    stroke: var(--rs-line);
    stroke-width: 1;
    stroke-dasharray: 2 3;
}
.rs-radar .rs-Poly {
    fill: rgba(200, 90, 23, 0.15);
    stroke: var(--rs-accent);
    stroke-width: 2.5;
    stroke-linejoin: round;
}
.rs-radar .rs-vertex {
    stroke: #FFFFFF;
    stroke-width: 2.5;
}
.rs-radar .rs-vlabel {
    font-family: var(--rs-sans);
    font-size: 11.5px;
    font-weight: 700;
    fill: var(--rs-ink);
}
.rs-radar .rs-vscore {
    font-family: var(--rs-mono);
    font-size: 11px;
    font-weight: 700;
    fill: var(--rs-muted);
}

/* Summary strip inside hero */
.rs-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--rs-line);
}
.rs-summary-item {
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-md);
    padding: 12px 14px;
}
.rs-summary-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rs-muted);
    margin-bottom: 4px;
}
.rs-summary-val {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rs-ink);
    line-height: 1.35;
}

/* Numbers strip under hero (6 RIASEC bars) */
.rs-numbers {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    background: var(--rs-card);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-lg);
    padding: 16px 18px;
    box-shadow: var(--rs-shadow-sm);
}
.rs-num {
    padding: 8px 10px;
    border-radius: var(--rs-r-sm);
    position: relative;
    background: var(--rs-paper);
    border: 1px solid transparent;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.rs-num:hover {
    transform: translateY(-2px);
    border-color: var(--rs-line-strong);
}
.rs-num-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}
.rs-num-code {
    font-family: var(--rs-mono);
    font-size: 12px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 5px;
    color: #fff;
}
.rs-num-val {
    font-family: var(--rs-mono);
    font-size: 17px;
    font-weight: 800;
    color: var(--rs-ink);
}
.rs-num-val small {
    font-size: 11px;
    color: var(--rs-muted);
    font-weight: 500;
}
.rs-num-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--rs-ink-soft);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rs-num-bar {
    height: 5px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
}
.rs-num-bar > span {
    display: block;
    height: 100%;
    border-radius: 3px;
}

/* ---------- FULL-WIDTH BODY WITH CHAPTER PILL NAVIGATION ---------- */
.rs-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.rs-toc {
    position: static;
    background: #FFFFFF;
    border: 1.5px solid var(--rs-line);
    border-radius: var(--rs-r-lg);
    padding: 18px 22px;
    box-shadow: var(--rs-shadow-sm);
}
.rs-toc-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rs-muted);
    padding: 0 0 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rs-line);
}
.rs-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rs-toc-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rs-ink-soft);
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    text-decoration: none;
    transition: all 0.18s ease;
    line-height: 1.3;
}
.rs-toc-list a:hover {
    background: #FFFFFF;
    border-color: #0F172A;
    color: #0F172A;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.rs-toc-list a.is-active {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
    font-weight: 700;
}
.rs-toc-list a.is-active .rs-toc-num {
    color: #FED7AA;
}
.rs-toc-list a.is-locked {
    color: var(--rs-faint);
    background: #F1F5F9;
}
.rs-toc-num {
    font-family: var(--rs-mono);
    font-size: 11px;
    color: var(--rs-muted);
    font-weight: 800;
    flex-shrink: 0;
}

/* ---------- CHAPTERS ---------- */
.rs-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}
.rs-ch {
    background: var(--rs-card);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-xl);
    padding: 36px 40px;
    box-shadow: var(--rs-shadow-sm);
    scroll-margin-top: 24px;
}
.rs-ch-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--rs-line);
}
.rs-ch-num {
    font-family: var(--rs-mono);
    font-size: 12px;
    font-weight: 800;
    color: var(--rs-accent);
    background: var(--rs-accent-soft);
    border: 1px solid #FED7AA;
    padding: 4px 10px;
    border-radius: 3px;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.rs-ch-titles {
    flex: 1;
}
.rs-ch-kicker {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--rs-muted);
    margin-bottom: 3px;
}
.rs-ch h2 {
    font-family: var(--rs-serif);
    font-size: clamp(20px, 2.3vw, 26px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.22;
    color: var(--rs-ink);
    margin: 0;
}
.rs-ch-sub {
    font-size: 14.5px;
    color: var(--rs-muted);
    margin: 6px 0 0;
}

/* Prose inside chapters */
.rs-prose {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--rs-ink-soft);
}
.rs-prose p {
    margin: 0 0 16px;
}
.rs-prose p:last-child {
    margin-bottom: 0;
}
.rs-prose strong {
    color: var(--rs-ink);
    font-weight: 700;
}
.rs-callout {
    margin: 20px 0 0;
    padding: 18px 22px;
    background: var(--rs-paper);
    border-left: 4px solid var(--rs-accent);
    border-radius: 0 var(--rs-r-md) var(--rs-r-md) 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--rs-ink);
}
.rs-callout strong {
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rs-accent);
    margin-bottom: 5px;
}

/* ---------- FAMOUS PARALLEL BANNER INSIDE CH 01 ---------- */
.rs-famous-card {
    margin-top: 22px;
    padding: 22px 24px;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border-radius: var(--rs-r-lg);
    color: #F8FAFC;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
}
.rs-famous-avatar {
    width: 52px;
    height: 52px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #FBBF24;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rs-famous-kicker {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #FBBF24;
    margin-bottom: 4px;
}
.rs-famous-name {
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 3px;
}
.rs-famous-role {
    font-size: 13px;
    color: #94A3B8;
    margin-bottom: 10px;
}
.rs-famous-why {
    font-size: 14px;
    line-height: 1.6;
    color: #E2E8F0;
    margin-bottom: 12px;
}
.rs-famous-motto {
    font-size: 13.5px;
    font-style: italic;
    color: #FDE68A;
    padding-left: 12px;
    border-left: 2px solid #F59E0B;
}

/* ---------- DIMENSION EXPLORER (6 RIASEC PROGRESS RINGS) ---------- */
.rs-dims {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.rs-dim-instruction {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    background: #F8FAFC;
    border: 1.5px dashed #CBD5E1;
    border-radius: 10px;
    padding: 11px 16px;
    margin-bottom: 12px;
    line-height: 1.45;
}
.rs-dim-instruction svg {
    color: var(--color-accent, #E07A22);
    flex-shrink: 0;
}
.rs-dim-tabs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}
.rs-dim-tab {
    appearance: none;
    background: var(--rs-paper);
    border: 1.5px solid var(--rs-line);
    border-radius: var(--rs-r-md);
    padding: 13px 8px 11px;
    cursor: pointer;
    text-align: center;
    transition: all 0.18s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    color: var(--rs-ink);
    position: relative;
}
.rs-dim-tab:hover {
    border-color: #0F172A;
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.rs-dim-tab.is-active {
    background: #fff;
    border-color: #0F172A;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
.rs-dim-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #0F172A;
    z-index: 2;
}
.rs-dim-tab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
    margin-top: 4px;
    transition: all 0.15s ease;
    width: calc(100% - 6px);
    white-space: nowrap;
}
.rs-dim-tab:hover .rs-dim-tab-btn {
    background: #E2E8F0;
    color: #0F172A;
}
.rs-dim-tab.is-active .rs-dim-tab-btn {
    background: #0F172A;
    color: #FFFFFF;
    border-color: #0F172A;
}
.rs-ring {
    width: 56px;
    height: 56px;
    display: block;
}
.rs-ring-track {
    fill: none;
    stroke: var(--rs-line);
    stroke-width: 5;
}
.rs-ring-fill {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.5s ease;
}
.rs-ring-label {
    font-family: var(--rs-mono);
    font-size: 13px;
    font-weight: 800;
    fill: var(--rs-ink);
}
.rs-dim-tab-code {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rs-muted);
}
.rs-dim-tab-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--rs-ink);
}

.rs-dim-detail {
    display: none;
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-lg);
    padding: 26px 28px;
}
.rs-dim-detail.is-active {
    display: block;
}
.rs-dim-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--rs-line);
}
.rs-dim-head-ring {
    width: 116px;
    height: 116px;
    flex-shrink: 0;
}
.rs-dim-head-titles h3 {
    font-family: var(--rs-serif);
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--rs-ink);
}
.rs-dim-head-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.rs-dim-head-sub {
    font-size: 14.5px;
    color: var(--rs-ink-soft);
    margin: 0;
    line-height: 1.6;
}
.rs-dim-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 18px;
}
.rs-dim-box {
    background: var(--rs-card);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-md);
    padding: 16px 18px;
}
.rs-dim-box h4 {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rs-muted);
    margin: 0 0 10px;
}
.rs-dim-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 13.5px;
    color: var(--rs-ink-soft);
}
.rs-dim-list li {
    position: relative;
    padding-left: 16px;
    line-height: 1.45;
}
.rs-dim-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--rs-accent);
}

/* ---------- BELL CURVES (POPULATION PERCENTILES) ---------- */
.rs-bell-explainer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    color: #334155;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-left: 4px solid #2563EB;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
    line-height: 1.5;
}
.rs-bell-explainer svg {
    color: #2563EB;
    flex-shrink: 0;
    margin-top: 2px;
}
.rs-bells {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.rs-bell {
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-md);
    padding: 16px 16px 14px;
}
.rs-bell-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}
.rs-bell-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--rs-ink);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.rs-bell-dot {
    width: 8px;
    height: 8px;
    border-radius: 3px;
    display: inline-block;
}
.rs-bell-pct {
    font-family: var(--rs-mono);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--rs-ink);
}
.rs-bell-svg {
    width: 100%;
    height: 82px;
    display: block;
    overflow: visible;
}
.rs-bell-svg .rs-curve-bg {
    fill: #E2E8F0;
}
.rs-bell-svg .rs-curve-line {
    fill: none;
    stroke: #94A3B8;
    stroke-width: 1.5;
}
.rs-bell-svg .rs-baseline {
    stroke: var(--rs-line-strong);
    stroke-width: 1;
}
.rs-bell-svg .rs-meanline {
    stroke: #94A3B8;
    stroke-width: 1;
    stroke-dasharray: 2 2;
}
.rs-bell-foot {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--rs-muted);
    margin-top: 4px;
}

/* ---------- STRENGTHS & WATCHOUTS GRID ---------- */
.rs-sw {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.rs-sw-card {
    border-radius: var(--rs-r-lg);
    padding: 22px 24px;
    border: 1px solid var(--rs-line);
}
.rs-sw-card.is-strength {
    background: linear-gradient(180deg, #F0FDF4 0%, #FFFFFF 65%);
    border-color: #BBF7D0;
}
.rs-sw-card.is-watch {
    background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 65%);
    border-color: #FDE68A;
}
.rs-sw-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.rs-sw-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
}
.rs-sw-card.is-strength .rs-sw-icon {
    background: #DCFCE7;
    color: #15803D;
}
.rs-sw-card.is-watch .rs-sw-icon {
    background: #FEF3C7;
    color: #B45309;
}
.rs-sw-head h3 {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    color: var(--rs-ink);
}
.rs-sw-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rs-sw-list li {
    font-size: 14px;
    line-height: 1.55;
    color: var(--rs-ink-soft);
    padding-left: 16px;
    position: relative;
}
.rs-sw-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
}
.rs-sw-card.is-strength .rs-sw-list li::before {
    background: #16A34A;
}
.rs-sw-card.is-watch .rs-sw-list li::before {
    background: #D97706;
}
.rs-sw-list strong {
    color: var(--rs-ink);
    display: block;
    margin-bottom: 2px;
}

/* ---------- BIPOLAR WORK ENVIRONMENT SCALES ---------- */
.rs-bps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.rs-bp {
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-md);
    padding: 16px 20px;
}
.rs-bp-poles {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}
.rs-bp-pole {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rs-ink-soft);
}
.rs-bp-pole.is-winner {
    color: var(--rs-ink);
    font-weight: 800;
}
.rs-bp-pole small {
    font-family: var(--rs-mono);
    font-size: 12px;
    color: var(--rs-accent);
    margin-left: 4px;
}
.rs-bp-track {
    position: relative;
    height: 8px;
    background: #E2E8F0;
    border-radius: 4px;
    cursor: default;
    user-select: none;
}
.rs-bp-center {
    position: absolute;
    left: 50%;
    top: -4px;
    bottom: -4px;
    width: 2px;
    background: #94A3B8;
    border-radius: 1px;
    z-index: 1;
}
.rs-bp-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, #0F172A, #C85A17);
    border-radius: 4px;
}
.rs-bp-dot {
    position: absolute;
    top: 50%;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: #0F172A;
    border: 1px solid #FFFFFF;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
    pointer-events: none;
    cursor: default;
    z-index: 2;
}
.rs-bp-dot::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #0F172A;
}
.rs-bp-dot::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid #0F172A;
}
.rs-bp-note {
    font-size: 13px;
    color: var(--rs-muted);
    margin: 10px 0 0;
}

/* ---------- CERMAT 3-APPLICATION STRATEGY SCHOOL CARDS ---------- */
.rs-school-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}
.rs-school-card {
    background: #FFFFFF;
    border: 1.5px solid var(--rs-line-strong);
    border-radius: var(--rs-r-lg);
    padding: 24px 26px;
    box-shadow: var(--rs-shadow-sm);
    position: relative;
    overflow: hidden;
}
.rs-school-card.is-primary {
    border-color: #F59E0B;
    background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 38%);
}
.rs-school-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.rs-school-role {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 11px;
    border-radius: 3px;
    background: #0F172A;
    color: #FBBF24;
}
.rs-school-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rs-school-code {
    font-family: var(--rs-mono);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--rs-paper-warm);
    color: var(--rs-ink-soft);
    border: 1px solid var(--rs-line);
}
.rs-school-match {
    font-family: var(--rs-mono);
    font-size: 13px;
    font-weight: 800;
    padding: 4px 11px;
    border-radius: 6px;
    background: #DCFCE7;
    color: #15803D;
    border: 1px solid #BBF7D0;
}
.rs-school-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--rs-ink);
    margin: 0 0 4px;
    letter-spacing: -0.015em;
}
.rs-school-type {
    font-size: 13px;
    font-weight: 600;
    color: var(--rs-muted);
    margin-bottom: 14px;
}
.rs-school-why {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--rs-ink-soft);
    margin-bottom: 16px;
}
.rs-school-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rs-line);
}
.rs-school-box {
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-md);
    padding: 13px 15px;
}
.rs-school-box-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--rs-muted);
    margin-bottom: 6px;
}
.rs-school-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--rs-ink);
}
.rs-school-list li {
    display: flex;
    align-items: baseline;
    gap: 7px;
}
.rs-school-list li::before {
    content: "•";
    color: var(--rs-accent);
    font-weight: 900;
}
.rs-school-list.is-interactive-list {
    gap: 8px;
}
.rs-school-list.is-interactive-list li.rs-school-link-item {
    display: block;
}
.rs-school-list.is-interactive-list li.rs-school-link-item::before {
    display: none;
    content: none;
}
.rs-school-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    text-decoration: none;
    color: var(--rs-ink);
    transition: all 0.18s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.rs-school-link:hover {
    border-color: #E07A22;
    background: #FFFBF7;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(224, 122, 34, 0.10);
}
.rs-school-link-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.rs-school-link-name {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.35;
}
.rs-school-link-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: #E07A22;
}
.rs-school-link-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 21px;
}
.rs-school-cermat-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
}
.rs-school-cermat-pill strong {
    color: #0F172A;
    font-weight: 800;
    margin-left: 3px;
}
.rs-school-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 6px 11px;
    border-radius: 8px;
    background: #FFF7ED;
    border: 1px solid #FFEDD5;
    color: #C2410C;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.18s ease;
}
.rs-school-link:hover .rs-school-link-cta {
    background: #E07A22;
    border-color: #E07A22;
    color: #FFFFFF;
}
.rs-school-catalog-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #CBD5E1;
}
.rs-school-catalog-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: #0284C7;
    text-decoration: none;
    padding: 4px 2px;
    transition: color 0.15s ease;
}
.rs-school-catalog-btn:hover {
    color: #0369A1;
    text-decoration: underline;
}
@media (max-width: 640px) {
    .rs-school-link {
        flex-direction: column;
        align-items: flex-start;
    }
    .rs-school-link-cta {
        align-self: flex-start;
        margin-left: 21px;
    }
}

/* ---------- CAREER BARS ---------- */
.rs-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rs-bar {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--rs-paper);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-md);
}
.rs-bar-rank {
    font-family: var(--rs-mono);
    font-size: 12px;
    font-weight: 800;
    color: var(--rs-muted);
    text-align: center;
}
.rs-bar-main {
    min-width: 0;
}
.rs-bar-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.rs-bar-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--rs-ink);
}
.rs-bar-tag {
    font-family: var(--rs-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid var(--rs-line);
    color: var(--rs-muted);
}
.rs-bar-track {
    height: 7px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
}
.rs-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #0F172A, #C85A17);
}
.rs-bar-pct {
    font-family: var(--rs-mono);
    font-size: 14px;
    font-weight: 800;
    color: var(--rs-ink);
    min-width: 46px;
    text-align: right;
}

/* ---------- ACTION STEPS BOX (DOD CHECKLIST) ---------- */
.rs-steps-box {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    color: #fff;
    border-radius: var(--rs-r-xl);
    padding: 32px 36px;
    margin-top: 22px;
}
.rs-steps-box .rs-ch-kicker {
    color: #FBBF24;
}
.rs-steps-box h3 {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 4px 0 18px;
}
.rs-steps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.rs-step {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--rs-r-md);
    padding: 16px 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.rs-step-num {
    font-family: var(--rs-mono);
    font-size: 12px;
    font-weight: 800;
    width: 26px;
    height: 26px;
    border-radius: 3px;
    background: #F59E0B;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.rs-step-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}

/* ---------- CLIFFHANGER FREEMIUM PAYWALL ("V NEJLEPŠÍM SE TO UTNE") ---------- */
.rs-cliffhanger-card {
    position: relative;
    background: var(--rs-card);
    border: 1px solid var(--rs-line);
    border-radius: var(--rs-r-xl);
    overflow: hidden;
    box-shadow: var(--rs-shadow-lg);
    scroll-margin-top: 88px;
}
.rs-cliffhanger-preview {
    padding: 36px 40px 10px;
    -webkit-mask-image: linear-gradient(to bottom, #000 38%, rgba(0, 0, 0, 0.25) 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 38%, rgba(0, 0, 0, 0.25) 75%, transparent 100%);
    pointer-events: none;
    user-select: none;
}
.rs-redacted-pill {
    display: inline-block;
    background: #E2E8F0;
    color: transparent;
    border-radius: 6px;
    padding: 2px 10px;
    filter: blur(4px);
    user-select: none;
}
.rs-paywall-cta {
    background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%);
    color: #FFFFFF;
    padding: 36px 40px;
    border-top: 3px solid #F59E0B;
    position: relative;
}
.rs-paywall-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(245, 158, 11, 0.16);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #FBBF24;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 12px;
    border-radius: 3px;
    margin-bottom: 14px;
}
.rs-paywall-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 28px;
    align-items: center;
}
.rs-paywall-title {
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 900;
    line-height: 1.2;
    color: #FFFFFF;
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}
.rs-paywall-desc {
    font-size: 14.5px;
    color: #CBD5E1;
    line-height: 1.6;
    margin: 0 0 18px;
}
.rs-paywall-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.rs-paywall-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.8px;
    color: #F1F5F9;
    line-height: 1.45;
}
.rs-paywall-list li svg {
    flex-shrink: 0;
    color: #FBBF24;
    margin-top: 2px;
}
.rs-paywall-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--rs-r-lg);
    padding: 24px;
}
.rs-paywall-price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.rs-paywall-price-label {
    font-size: 12.5px;
    color: #94A3B8;
    font-weight: 600;
}
.rs-paywall-price-val {
    font-size: 32px;
    font-weight: 900;
    color: #FBBF24;
    letter-spacing: -0.02em;
}
.rs-paywall-price-val small {
    font-size: 13px;
    color: #CBD5E1;
    font-weight: 500;
}

/* ---------- RESPONSIVE BREAKPOINTS FOR .RS ---------- */
@media (max-width: 980px) {
    .rs-hero {
        grid-template-columns: 1fr;
    }
    .rs-numbers {
        grid-template-columns: repeat(3, 1fr);
    }
    .rs-body {
        grid-template-columns: 1fr;
    }
    .rs-toc {
        position: static;
    }
    .rs-toc-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }
    .rs-bells {
        grid-template-columns: repeat(2, 1fr);
    }
    .rs-paywall-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .rs-hero-main, .rs-ch, .rs-steps-box, .rs-paywall-cta, .rs-cliffhanger-preview {
        padding: 24px 20px;
    }
    .rs-summary {
        grid-template-columns: 1fr;
    }
    .rs-numbers {
        grid-template-columns: repeat(2, 1fr);
    }
    .rs-dim-tabs {
        grid-template-columns: repeat(3, 1fr);
    }
    .rs-dim-head {
        grid-template-columns: 1fr;
        text-align: center;
        justify-items: center;
    }
    .rs-dim-cols, .rs-sw, .rs-bells, .rs-steps-grid, .rs-school-grid {
        grid-template-columns: 1fr;
    }
    .rs-famous-card {
        grid-template-columns: 1fr;
    }
}

/* Tiskový styl (@media print) je definován na konci souboru pro plnou prioritu nad mobilními breakpointy */

/* ========================================================== */
/* PŘÍSTUPOVÁ BRÁNA (GATEKEEPER UI)                          */
/* ========================================================== */
html.access-locked body > header,
html.access-locked body > main,
html.access-locked body > footer {
    display: none !important;
}

html.access-granted .gatekeeper-screen {
    display: none !important;
}

.gatekeeper-screen {
    position: fixed;
    inset: 0;
    background: #FFFFFF;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.gatekeeper-card {
    width: 100%;
    max-width: 440px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 6px;
    padding: 44px 38px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
    border-top: 4px solid var(--color-accent);
}

.gatekeeper-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
}

.gatekeeper-logo {
    width: 34px;
    height: 34px;
}

.gatekeeper-brand-name {
    font-size: 1.5rem;
    font-weight: 900;
    color: #0F172A;
    letter-spacing: -0.03em;
}

.gatekeeper-brand-name .accent {
    color: var(--color-accent);
}

.gatekeeper-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #C2410C;
    background: #FFF7ED;
    border: 1px solid #FFEDD5;
    padding: 4px 11px;
    border-radius: 3px;
    margin-bottom: 14px;
}

.gatekeeper-title {
    font-size: 1.45rem;
    font-weight: 850;
    color: #0F172A;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.gatekeeper-sub {
    font-size: 0.9rem;
    color: #64748B;
    line-height: 1.55;
    margin: 0;
}

.gatekeeper-input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.25em;
    color: #0F172A;
    background: #F8FAFC;
    border: 1.5px solid #CBD5E1;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.gatekeeper-input:focus {
    background: #FFFFFF;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(200, 90, 23, 0.15);
}

.gatekeeper-input.is-invalid {
    border-color: #DC2626;
    background: #FEF2F2;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.gatekeeper-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #DC2626;
    font-size: 0.82rem;
    font-weight: 700;
    margin-top: 10px;
}


/* ========================================================================== */
/* MOBILNÍ VYLADĚNÍ                                                           */
/* Pouze pro úzké displeje. Desktop (>640 px) se nemění, barvy zůstávají.     */
/* Cíl: žádné slepené texty, žádné přetékání, stejný rytmus mezer, snadné     */
/* ovládání palcem (min. 44 px) a čitelné grafy.                              */
/* ========================================================================== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (max-width: 640px) {

    /* ---------- Globální rám a rytmus ---------- */
    html { scroll-padding-top: 76px; }

    header { padding: 12px 14px; }
    .header-content { gap: 8px; }
    .brand-link { font-size: 1.15rem; gap: 7px; flex-shrink: 0; }
    .brand-icon { width: 22px; height: 22px; }
    .header-actions { gap: 6px; flex-shrink: 0; }
    .brand-pill {
        display: none !important;
    }
    .nav-btn-katalog {
        font-size: 0.78rem;
        padding: 6px 10px;
        gap: 5px;
    }

    /* Užší okraje = víc místa pro obsah vnořených karet */
    main { padding: 16px 12px 56px; }
    .page-container:has(.info-page-view),
    .page-container:has(.rs) { max-width: 100%; }

    /* Patička: pevná mřížka 2 x 2, odkazy se už nelámou */
    footer { padding: 26px 16px 30px; }
    .footer-inner { align-items: flex-start; gap: 18px; }
    .footer-brand span { line-height: 1.5; }
    .footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 20px;
        width: 100%;
    }
    .footer-links a {
        white-space: nowrap;
        padding: 9px 0;
        font-size: 0.86rem;
    }

    /* Primární tlačítka přes celou šířku = pohodlný dosah palcem */
    .btn-diagonal { padding: 14px 20px; min-height: 48px; }
    .hero-btn-row {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        align-items: stretch;
    }
    .hero-left-content {
        margin-top: 0;
        width: 100%;
    }
    .hero-price-badge,
    .hero-price-strip,
    .hero-price-tag {
        position: static;
        width: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 8px 12px;
        box-sizing: border-box;
        margin-top: 24px;
        border-radius: 4px;
        background: transparent;
        box-shadow: none;
    }
    .hero-price-inner {
        justify-content: center;
        text-align: center;
        gap: 6px 10px;
    }
    .hero-price-dot {
        display: none;
    }
    .hero-price-note {
        white-space: normal;
        text-align: center;
    }
    .hero-micro-trust {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 12px;
        font-size: 0.74rem;
        margin-top: 2px;
    }
    .hero-left-angled .btn-diagonal,
    .hero-left-angled .btn-hero-secondary,
    .bottom-cta-banner .btn-diagonal,
    .preview-cta-action .btn-diagonal,
    .info-page-card .btn-diagonal {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }
    .hero-sublink-pill {
        justify-content: center;
        padding: 9px 14px;
        font-size: 0.82rem;
    }

    /* Katalog škol responzivní zobrazení na mobilu */
    .skoly-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .skoly-filters-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .skoly-filter-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .skoly-select {
        width: 100%;
    }
    .skoly-filter-pills {
        width: 100%;
    }
    .skoly-type-pill {
        flex: 1;
        text-align: center;
        padding: 8px 6px;
        font-size: 0.78rem;
    }
    .skoly-search-box {
        padding: 14px 12px;
    }
    .school-detail-modal-box {
        padding: 20px 14px;
        width: 96%;
    }

    /* iOS nezoomuje při psaní, když je písmo aspoň 16 px */
    .onb-text-input,
    .onboarding-select,
    .gatekeeper-input,
    input[type="text"], input[type="email"], select, textarea {
        font-size: 16px;
    }

    /* ---------- Úvodní stránka ---------- */
    .hero-left-angled { padding: 28px 20px; }
    .hero-title-angled { font-size: 1.65rem; line-height: 1.2; }

    .process-map-box,
    .trap-showcase-box,
    .preview-showcase,
    .bottom-cta-banner { padding: 16px 12px; margin-bottom: 36px; }

    .process-flow-grid { gap: 6px; }
    .process-step-card {
        min-height: 0;
        padding: 18px 14px 14px;
        gap: 8px;
    }
    .process-illustration-wrap { min-height: 112px; flex: 0 0 auto; }
    .process-illustration-img { height: 100px; }
    .process-illustration-img.img-tall { height: 116px; }
    .process-arrow-cell { margin: 0 auto; height: 28px; }

    .trap-comparison-card { padding: 16px 14px; gap: 12px; }
    .trap-card-quote { font-size: 0.95rem; }
    .trap-main-title { font-size: 1.3rem; line-height: 1.25; }

    /* ---------- Informační stránky (Metodika, Podmínky, Kontakt) ---------- */
    .info-page-card { padding: 22px 16px 26px; }
    .info-page-title { font-size: 1.55rem; line-height: 1.2; }
    .info-page-lead {
        font-size: 0.96rem;
        line-height: 1.6;
        margin-bottom: 24px;
        padding-bottom: 20px;
    }
    .info-section-title { align-items: flex-start; font-size: 1.12rem; }
    .info-section-title svg { flex-shrink: 0; margin-top: 0.15em; }
    .info-faq-item { padding: 16px 14px; }

    /* Metodika */
    .metodika-main-card { padding: 22px 14px; }
    .metodika-header { margin-bottom: 26px; padding-bottom: 22px; }
    .metodika-title { font-size: 1.75rem; line-height: 1.2; }
    .metodika-lead { font-size: 1rem; line-height: 1.65; }
    .metodika-section { padding: 20px 14px; margin-bottom: 20px; }
    .metodika-section-title { font-size: 1.25rem; }
    .metodika-split-card,
    .metodika-comp-col { padding: 20px 14px; }
    .metodika-riasec-card { padding: 16px 14px; }
    .metodika-pipe-step { padding: 18px 16px; }

    /* Mřížky nesmí být širší než karta (minmax(0,1fr) zruší min-content) */
    .metodika-split-grid,
    .metodika-cermat-grid,
    .metodika-telemetry-grid,
    .metodika-comparison-grid,
    .metodika-riasec-grid,
    .metodika-pipeline {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .metodika-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .metodika-stat-card { padding: 14px 12px; }
    .metodika-stat-val { font-size: 1.3rem; }
    .metodika-stat-lbl { font-size: 0.78rem; }

    /* Mince: název nahoře, štítek pod ním (dřív se mačkaly vedle sebe) */
    .metodika-coin-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 14px;
    }
    .metodika-coin-left { width: 100%; min-width: 0; }
    .metodika-coin-name { min-width: 0; overflow-wrap: anywhere; }
    .metodika-coin-pill { margin-left: 36px; white-space: normal; }

    /* Bipolární osy */
    .metodika-bp-card { padding: 12px 14px; }
    .metodika-bp-labels { gap: 10px; font-size: 0.8rem; }
    .metodika-bp-labels > * { min-width: 0; }
    .metodika-bp-labels > *:last-child { text-align: right; }

    /* Srovnání: nadpis a štítek pod sebou */
    .comp-col-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Kontakt */
    .contact-status-strip { padding: 14px; gap: 12px; }
    .contact-channel-card { padding: 22px 16px 20px; }
    .channel-card-top { gap: 14px; }
    .channel-avatar-img {
        width: 56px; height: 56px; max-width: 56px; max-height: 56px;
    }
    .channel-title { font-size: 1.12rem; }

    /* E-mail a „Kopírovat“ pod sebou, nic nevyčnívá z karty */
    .channel-email-wrap {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }
    .channel-email-address {
        font-size: 1rem;
        text-align: center;
        overflow-wrap: anywhere;
    }
    .btn-copy-address {
        width: 100%;
        justify-content: center;
        padding: 10px 12px;
        min-height: 42px;
    }
    .btn-mail-action { padding: 14px 16px; min-height: 48px; }

    .contact-cta-box { padding: 22px 16px; gap: 16px; }
    .contact-cta-title { font-size: 1.1rem; line-height: 1.3; }
    .contact-cta-box .btn-diagonal {
        white-space: nowrap;
        padding: 14px 16px;
        font-size: 0.92rem;
    }

    /* Podmínky služby */
    .terms-highlight-strip { padding: 14px; gap: 14px; }
    .terms-card { padding: 18px 14px; }
    .terms-card-header { align-items: flex-start; gap: 10px; margin-bottom: 12px; }
    .terms-card-icon-wrap { width: 34px; height: 34px; }
    .terms-card-title { font-size: 1.08rem; line-height: 1.3; }
    .terms-tier-box { padding: 16px 14px; }
    .terms-privacy-card { padding: 14px; }
    .terms-note-box { padding: 12px 14px; }

    /* ---------- Test (otázky a kalibrace) ---------- */
    .question-box { padding: 20px 14px; border-radius: 14px; }
    .progress-header { margin-bottom: 14px; }
    .progress-meta {
        font-size: 0.78rem;
        gap: 6px;
        flex-wrap: wrap;
    }
    .btn-test-top-restart {
        padding: 4px 8px;
        font-size: 0.74rem;
    }

    /* Stylové karty odpovědí na mobilu - bez trhání a skoků */
    .options-group { gap: 10px; margin-bottom: 22px; }
    .option-btn {
        padding: 13px 14px;
        gap: 12px;
        min-height: 48px;
        align-items: flex-start;
        transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
    }
    .option-btn:hover {
        transform: none;
    }
    .option-btn:active {
        transform: scale(0.975);
        transition-duration: 0.04s;
    }
    .option-letter {
        width: 28px;
        height: 28px;
        font-size: 0.76rem;
        flex-shrink: 0;
        aspect-ratio: 1 / 1;
        margin-top: 1px;
    }
    .option-label {
        font-size: 0.88rem;
        line-height: 1.4;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .option-indicator {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        aspect-ratio: 1 / 1;
        margin-top: 3px;
    }
    .option-check-icon {
        width: 11px;
        height: 11px;
    }

    /* Psací otázky (depth meter) na mobilu */
    .depth-meter-card {
        padding: 12px 14px;
        border-radius: 12px;
        margin-bottom: 12px;
    }
    .depth-meter-header {
        gap: 6px;
        margin-bottom: 8px;
    }
    .depth-meter-top-row {
        gap: 6px;
        min-height: 24px;
    }
    .depth-meter-title {
        font-size: 0.8rem;
    }
    .depth-stage-badge {
        font-size: 0.67rem;
        padding: 2.5px 8px;
    }
    .depth-meter-counter-wrap {
        gap: 6px;
        font-size: 0.74rem;
    }
    .depth-char-count {
        font-size: 0.75rem;
    }
    .depth-target-hint {
        font-size: 0.71rem;
    }
    .depth-hint-text {
        font-size: 0.76rem;
        line-height: 1.4;
    }
    .text-input {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 14px;
        font-size: 0.9rem;
    }

    .btn-nav { padding: 12px 20px; min-height: 46px; }

    /* Lepicí lišta „Zpět / Pokračovat“: vždy na dosah palce,
       i když je otázka dlouhá a odpovědi vyplní celou obrazovku */
    .q-nav {
        position: sticky;
        bottom: 0;
        z-index: 6;
        background: var(--bg-surface);
        margin: 8px -14px -22px;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 18px rgba(15, 23, 42, 0.06);
        border-radius: 0 0 var(--radius-box) var(--radius-box);
    }

    /* ---------- Výsledek / ukázkový report (.rs) ---------- */
    .rs { padding: 0 0 40px; }
    .rs-topbar { padding: 12px 14px; gap: 10px; }
    .rs-ch { scroll-margin-top: 16px; }

    .rs-hero { gap: 14px; margin-bottom: 16px; }
    .rs-hero-main, .rs-ch, .rs-steps-box,
    .rs-paywall-cta, .rs-cliffhanger-preview { padding: 22px 16px; }
    .rs-hero h1 { font-size: 1.65rem; }
    .rs-hero-sub { font-size: 1rem; margin-bottom: 18px; }
    .rs-hero-viz { padding: 18px 6px 12px; }
    .rs-numbers { padding: 14px; gap: 8px; }

    /* Radar: popisky byly po zmenšení SVG ~7 px, teď ~10 px */
    .rs-radar .rs-vlabel { font-size: 16px; }
    .rs-radar .rs-vscore { font-size: 14px; transform: translateY(4px); }

    /* Obsah kapitol: štítek nad titulkem, ne vedle (dřív zbyl úzký sloupec) */
    .rs-ch-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 14px;
        margin-bottom: 18px;
    }
    .rs-ch-titles { width: 100%; }
    .rs-ch h2 { font-size: 1.32rem; line-height: 1.25; }
    .rs-ch-sub { font-size: 0.95rem; line-height: 1.55; }
    .rs-prose { font-size: 15px; line-height: 1.7; }
    .rs-callout { padding: 14px 16px; }
    .rs-famous-card { padding: 18px 16px; }

    /* Obsah posudku: vodorovný posuvný pás místo 9 řádků pod sebou */
    .rs-toc { padding: 12px 0 12px 12px; overflow: hidden; }
    .rs-toc-title { padding: 0 12px 8px 0; margin-bottom: 8px; }
    .rs-toc-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding: 0 12px 4px 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }
    .rs-toc-list::-webkit-scrollbar { display: none; }
    .rs-toc-list li { flex: 0 0 auto; scroll-snap-align: start; }
    .rs-toc-list a {
        white-space: nowrap;
        padding: 9px 12px;
        border: 1px solid var(--rs-line);
        background: var(--rs-paper);
    }
    .rs-toc-list a.is-active { border-color: #FED7AA; }

    /* 6 dimenzí RIASEC: 3 sloupce se už nevejdou přes okraj karty */
    .rs-dim-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .rs-dim-tab { padding: 10px 4px; min-width: 0; gap: 4px; }
    .rs-dim-tab.is-active::after { display: none; }
    .rs-dim-tab-btn { font-size: 9.5px; padding: 3px 2px; width: 100%; }
    .rs-ring { width: 46px; height: 46px; }
    .rs-dim-tab-code {
        font-size: 9.5px;
        letter-spacing: 0.02em;
        text-align: center;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }
    .rs-dim-tab-name { font-size: 11.5px; line-height: 1.25; overflow-wrap: anywhere; }
    .rs-dim-detail { padding: 18px 14px; }
    .rs-dim-head { gap: 14px; }
    .rs-dim-head-ring { width: 96px; height: 96px; }
    .rs-dim-head-titles h3 { font-size: 19px; }

    /* Gaussovy křivky: roztáhnout na šířku karty, popisky pod sebe nezalamovat */
    .rs-bell { padding: 14px 14px 12px; }
    .rs-bell-svg { height: 112px; }

    /* Silné stránky / pozor na */
    .rs-sw-card { padding: 18px 16px; }

    /* Bipolární škály: póly pod sebe, procenta se nezalamují */
    .rs-bp-card { padding: 14px 14px; }
    .rs-bp-poles { gap: 8px; align-items: flex-start; }
    .rs-bp-pole { font-size: 13px; line-height: 1.3; min-width: 0; }
    .rs-bp-pole small { display: inline-block; white-space: nowrap; margin-left: 4px; }

    /* Doporučené školy a žebříček profesí */
    .rs-school-card { padding: 16px 14px; }
    .rs-school-badges { gap: 6px; flex-wrap: wrap; }
    .rs-school-match { white-space: nowrap; }
    .rs-school-title { font-size: 1.15rem; line-height: 1.3; }
    .rs-school-box { padding: 14px; }
    .rs-bar { gap: 10px; padding: 12px; }
    .rs-bar-top { flex-wrap: wrap; row-gap: 6px; }
    .rs-bar-title { flex: 1 1 100%; line-height: 1.3; }

    /* Kalibrace: ikonka u dlouhého popisku sedí u prvního řádku */
    .onboarding-label { align-items: flex-start; line-height: 1.35; }
    .onboarding-label svg { flex-shrink: 0; margin-top: 0.12em; }

    /* Odemknutí kompletního posudku */
    .rs-paywall-title { font-size: 1.35rem; }
    .rs-paywall-box { padding: 18px 14px; }
    .rs-paywall-price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .rs-paywall-price-val { font-size: 30px; }
    .rs-steps-box { padding: 20px 14px; }
}

/* Malé telefony (iPhone SE, starší Androidy) */
@media (max-width: 380px) {
    header { padding: 10px 10px; }
    .brand-link { font-size: 1.02rem; gap: 5px; }
    .nav-btn-katalog { font-size: 0.74rem; padding: 5px 8px; gap: 4px; }
    main { padding: 12px 10px 48px; }

    .info-page-card, .metodika-main-card { padding-left: 12px; padding-right: 12px; }
    .info-page-title { font-size: 1.4rem; }
    .metodika-title { font-size: 1.55rem; }
    .metodika-stat-grid { grid-template-columns: minmax(0, 1fr); }

    .rs-hero h1 { font-size: 1.45rem; }
    .rs-ch { padding: 20px 12px; }
    .rs-dim-tab-code { font-size: 9px; }
    .rs-numbers { grid-template-columns: minmax(0, 1fr); }
    .channel-card-top { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================
   KATALOG A REJSTŘÍK STŘEDNÍCH ŠKOL ČR (.skoly)
   ========================================================== */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-btn-katalog {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--text-dark) !important;
    text-decoration: none !important;
    padding: 7px 14px;
    border-radius: var(--radius-btn);
    border: 1.5px solid var(--border-light);
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: var(--transition);
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-btn-katalog svg {
    color: var(--color-accent);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.nav-text-mobile {
    display: none;
}
.nav-text-school-short {
    display: none;
}
.nav-btn-katalog:hover {
    border-color: var(--color-accent);
    color: var(--color-accent) !important;
    background: var(--color-accent-soft);
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(224, 122, 34, 0.12);
}
.nav-btn-katalog:hover svg {
    transform: scale(1.1);
}
.btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid var(--border-light);
    color: var(--text-dark) !important;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 13px 22px;
    border-radius: var(--radius-btn);
    text-decoration: none !important;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.btn-hero-secondary:hover {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(224, 122, 34, 0.12);
}

.skoly-search-box {
    background: #FFFFFF;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-box);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.skoly-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}
.skoly-search-icon {
    position: absolute;
    left: 14px;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    pointer-events: none;
}
.skoly-search-input {
    width: 100%;
    padding: 14px 44px 14px 44px;
    font-size: 1.02rem;
    font-family: inherit;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-btn);
    background: #F8FAFC;
    color: var(--text-dark);
    outline: none;
    transition: var(--transition);
}
.skoly-search-input:focus {
    border-color: var(--color-accent);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(224, 122, 34, 0.15);
}
.skoly-search-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.skoly-search-clear:hover {
    color: var(--text-dark);
    background: #E2E8F0;
}

.skoly-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.skoly-filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.skoly-filter-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-dark);
}
.skoly-select {
    padding: 8px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-btn);
    background: #FFFFFF;
    color: var(--text-dark);
    outline: none;
    cursor: pointer;
}
.skoly-select:focus {
    border-color: var(--color-accent);
}

/* Čistý hlavičkový štítek podle pravidla 2 */
.skoly-clean-header-tag {
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #E07A22;
    margin-bottom: 8px;
}

/* Filtrovací záložky - čistá typografie, žádné ohrádky ani pilulky (Rule 2) */
.skoly-filter-pills {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.skoly-type-pill {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #64748B;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 6px 2px;
    border-radius: 0;
    cursor: pointer;
    box-shadow: none;
    transition: color 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}
.skoly-type-pill:hover {
    color: #0F172A;
    background: transparent;
}
.skoly-type-pill.is-active {
    color: #E07A22;
    background: transparent;
    border-bottom-color: #E07A22;
}

.skoly-type-pill.skoly-pill-audit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #C2410C;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    box-shadow: none;
}
.skoly-type-pill.skoly-pill-audit svg {
    color: #EA580C;
    flex-shrink: 0;
}
.skoly-type-pill.skoly-pill-audit:hover {
    color: #EA580C;
}
.skoly-type-pill.skoly-pill-audit.is-active {
    color: #E07A22;
    background: transparent;
    border-bottom-color: #E07A22;
}

.skoly-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    color: #64748B;
    font-weight: 600;
    margin-bottom: 18px;
}

/* 2x DVOUSLOUPCOVÝ KATALOG ŠKOL NA HLAVNÍ STRÁNCE */
.skoly-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-bottom: 28px;
}
@media (max-width: 860px) {
    .skoly-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.skoly-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.skoly-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -6px rgba(15, 23, 42, 0.08);
    border-color: #CBD5E1;
}

/* Karta navštívené školy – čistý standardní vzhled karty, pouze s malým odznáčkem */
.skoly-card.has-audit {
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
}
.skoly-card.has-audit:hover {
    border-color: #CBD5E1;
}
.skoly-audit-card-callout {
    display: none !important;
}

/* Malý decentní odznáček pro školy navštívené v terénu – čistá typografie bez barevného pozadí */
.skoly-odznak-navstiveno {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #047857;
    background: none;
    border: none;
    padding: 0;
    line-height: 1.25;
    letter-spacing: 0.02em;
}
.skoly-odznak-navstiveno svg {
    color: #059669;
    flex-shrink: 0;
}

.skoly-card-top {
    margin-bottom: 14px;
}
.skoly-card-meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}
.skoly-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748B;
}
.skoly-card-location svg {
    color: #94A3B8;
    flex-shrink: 0;
}
.skoly-loc-dot {
    color: #CBD5E1;
    font-weight: 400;
}

.skoly-type-tag {
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #E07A22;
    background: none;
    border: none;
    padding: 0;
}

.skoly-card-title {
    font-size: 1.24rem;
    font-weight: 850;
    color: #0F172A;
    line-height: 1.32;
    margin-bottom: 10px;
    letter-spacing: -0.015em;
}
.skoly-card-title a {
    color: #0F172A;
    text-decoration: none;
    transition: color 0.15s ease;
}
.skoly-card-title a:hover {
    color: #EA580C;
}

/* Čistý otevřený řádek klíčových čísel na kartě */
.skoly-card-facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin: 10px 0 14px;
    padding: 10px 0;
    border-top: 1px solid #F1F5F9;
    border-bottom: 1px solid #F1F5F9;
}
.skoly-fact-item {
    font-size: 0.84rem;
    color: #475569;
    font-weight: 500;
}
.skoly-fact-item strong {
    color: #0F172A;
    font-weight: 850;
}
.skoly-fact-item.is-cutoff {
    margin-left: auto;
    color: #64748B;
}
.skoly-fact-item.is-cutoff strong {
    color: #C2410C;
    font-weight: 900;
}
.skoly-fact-item.is-free {
    margin-left: auto;
    color: #64748B;
}
.skoly-fact-item.is-free strong {
    color: #15803D;
    font-weight: 850;
}

/* Strukturovaný náhled vyučovaných oborů přímo na kartě (2x grid) */
.skoly-card-obory-preview {
    margin-top: 6px;
}
.skoly-obory-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94A3B8;
    padding-bottom: 6px;
    border-bottom: 1px solid #F1F5F9;
}
.skoly-obory-preview-list {
    display: flex;
    flex-direction: column;
}
.skoly-card-obor-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #F8FAFC;
    font-size: 0.85rem;
}
.skoly-card-obor-row:last-child {
    border-bottom: none;
}
.skoly-obor-row-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.skoly-obor-row-name {
    font-weight: 700;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.skoly-obor-row-sub {
    font-size: 0.75rem;
    color: #94A3B8;
    white-space: nowrap;
    flex-shrink: 0;
}
.skoly-obor-row-right {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-shrink: 0;
    text-align: right;
}
.skoly-obor-row-pretlak {
    font-size: 0.75rem;
    color: #64748B;
}
.skoly-obor-row-pts {
    font-weight: 850;
    color: #C2410C;
    font-size: 0.85rem;
}
.skoly-obor-row-free {
    font-weight: 750;
    color: #15803D;
    font-size: 0.8rem;
}
.skoly-obor-row-muted {
    font-weight: 600;
    color: #64748B;
    font-size: 0.8rem;
}
.skoly-card-obor-more {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748B;
    padding-top: 6px;
}

.skoly-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid #F1F5F9;
    padding-top: 14px;
    margin-top: auto;
}
.skoly-card-web-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748B;
    text-decoration: none;
    transition: color 0.15s ease;
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.skoly-card-web-link:hover {
    color: #EA580C;
    text-decoration: underline;
}
.btn-skoly-detail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0F172A;
    color: #FFFFFF;
    font-weight: 750;
    font-size: 0.85rem;
    padding: 9px 15px;
    border-radius: 8px;
    border: 1px solid #0F172A;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
    margin-left: auto;
}
.btn-skoly-detail:hover {
    background: #EA580C;
    border-color: #EA580C;
    color: #FFFFFF;
}
.btn-skoly-detail svg {
    color: #FFFFFF;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.btn-skoly-detail:hover svg {
    transform: translateX(3px);
}

.skoly-load-more-wrap {
    text-align: center;
    margin: 20px 0 32px;
}
.btn-skoly-load-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid var(--border-light);
    color: var(--text-dark);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: var(--transition);
}
.btn-skoly-load-more:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-soft);
}

.skoly-cta-banner {
    background: #FFFFFF;
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-top: 28px;
}
.skoly-cta-content h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 4px;
}
.skoly-cta-content p {
    font-size: 0.9rem;
    color: var(--text-body);
    max-width: 560px;
    margin: 0;
}

/* ==========================================================
   DETAIL ŠKOLY – PŘEHLEDNÝ PROFIL BEZ VNOŘENÝCH KULATÝCH BOXŮ
   ========================================================== */
.school-profile-container {
    max-width: 1020px;
    margin: 0 auto;
    padding-bottom: 64px;
}
.school-profile-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.school-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    font-weight: 750;
    color: #E07A22;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}
.school-back-btn:hover {
    color: #C2410C;
    transform: translateX(-2px);
}
.school-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #64748B;
}
.school-breadcrumbs a {
    color: #64748B;
    text-decoration: none;
}
.school-breadcrumbs a:hover {
    color: #E07A22;
}
.school-breadcrumbs .active {
    color: #0F172A;
    font-weight: 700;
}

/* HLAVIČKA ŠKOLY */
.school-main-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 32px;
    margin-bottom: 24px;
}
.school-official-badge {
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #E07A22;
    margin-bottom: 8px;
}
.school-profile-title {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    color: #0F172A;
    line-height: 1.25;
    margin: 0 0 14px;
}
.school-info-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-bottom: 24px;
}
.school-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #475569;
}
.school-chip svg {
    color: #94A3B8;
    flex-shrink: 0;
}
.school-chip-link {
    color: #E07A22 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
.school-chip-link:hover {
    color: #C2410C !important;
}

/* OTEVŘENÝ 4-SLOUPCOVÝ PÁS KLÍČOVÝCH METRIK (ŽÁDNÉ KULATÉ BOXY) */
.school-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding-top: 22px;
    border-top: 1px solid #E2E8F0;
}
.school-strip-item {
    display: flex;
    flex-direction: column;
    padding-right: 14px;
    border-right: 1px solid #F1F5F9;
}
.school-strip-item:last-child {
    border-right: none;
    padding-right: 0;
}
.school-strip-label {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
    margin-bottom: 4px;
}
.school-strip-val {
    font-size: 1.3rem;
    font-weight: 900;
    color: #0F172A;
    line-height: 1.25;
}
.school-strip-val.is-accent {
    color: #C2410C;
}
.school-strip-sub {
    font-size: 0.78rem;
    color: #64748B;
    margin-top: 3px;
}

/* TERÉNNÍ AUDIT MŮJOBOR.CZ – ČISTÁ REDAKČNÍ TYPOGRAFIE (ŽÁDNÉ TABULKY ANI RÁMEČKY) */
.school-audit-section {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 28px;
}
.school-audit-header {
    margin-bottom: 14px;
}
.audit-verif-title {
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #047857;
    margin-bottom: 5px;
}
.school-audit-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: #0F172A;
    margin: 0;
    letter-spacing: -0.015em;
}
.school-audit-photo-wrap {
    margin: 14px 0 18px;
}
.school-audit-photo {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    display: block;
}
.school-audit-photo-caption {
    font-size: 0.76rem;
    color: #64748B;
    font-weight: 600;
    margin-top: 6px;
}
.school-audit-editorial {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid #F1F5F9;
    padding-top: 16px;
}
.audit-editorial-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.audit-item-label {
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0F172A;
}
.audit-editorial-item.is-verdict .audit-item-label {
    color: #E07A22;
}
.audit-item-text {
    font-size: 0.88rem;
    color: #334155;
    line-height: 1.5;
    margin: 0;
}
.school-audit-dates-line {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed #E2E8F0;
    font-size: 0.84rem;
    color: #475569;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.school-audit-dates-line strong {
    color: #0F172A;
}
.school-audit-dates-line a {
    color: #E07A22;
    text-decoration: underline;
}

/* SKUPINY OBORŮ (MATURITNÍ / VÝUČNÍ) – TABULKOVÝ PŘEHLED S ROZBALOVACÍM DETAILEM */
.school-obory-group {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 28px 32px;
    margin-bottom: 24px;
    container-type: inline-size;
}
.school-obory-group-header {
    margin-bottom: 18px;
}
.school-obory-group-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #0F172A;
    margin: 0 0 4px;
    letter-spacing: -0.015em;
}
.school-obory-group-count {
    font-weight: 700;
    color: #64748B;
    font-size: 1.1rem;
}
.school-obory-group-sub {
    font-size: 0.88rem;
    color: #64748B;
    margin: 0;
}

.obor-table-container {
    border-top: 2px solid #0F172A;
}
.obor-table-head {
    display: grid;
    grid-template-columns: 2.2fr 0.9fr 1.4fr 1.2fr 90px;
    gap: 16px;
    padding: 11px 12px;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
    border-bottom: 1px solid #E2E8F0;
    background: #F8FAFC;
}
.obor-table-list {
    display: flex;
    flex-direction: column;
}
.obor-row-item {
    border-bottom: 1px solid #E2E8F0;
    transition: background 0.15s ease;
}
.obor-row-item[open] {
    background: #FAFAFA;
}
.obor-row-summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 2.2fr 0.9fr 1.4fr 1.2fr 90px;
    gap: 16px;
    align-items: center;
    padding: 15px 12px;
    transition: background 0.15s ease;
}
.obor-row-summary::-webkit-details-marker {
    display: none;
}
.obor-row-summary:hover {
    background: #F8FAFC;
}
.obor-row-name {
    font-size: 1.02rem;
    font-weight: 850;
    color: #0F172A;
    line-height: 1.3;
    margin-bottom: 3px;
}
.obor-row-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: #64748B;
}
.obor-row-meta .meta-dot {
    color: #CBD5E1;
}
.obor-row-zamereni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 0.74rem;
}
.obor-zamereni-lbl {
    font-weight: 700;
    color: #475569;
}
.obor-zamereni-lbl {
    font-weight: 700;
    color: #64748B;
}
.obor-zamereni-names {
    color: #0369A1;
    font-weight: 700;
}

/* 3-tier Verification Status – čistá řádková typografie bez rámečků a bez boxů */
.school-verif-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.76rem;
    margin-bottom: 8px;
}
.school-verif-line.verif-navstiveno .verif-tag {
    color: #047857;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.school-verif-line.verif-checked .verif-tag {
    color: #1D4ED8;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.school-verif-line.verif-auto .verif-tag {
    color: #64748B;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.school-verif-line .verif-dot {
    color: #CBD5E1;
}
.school-verif-line .verif-note {
    color: #64748B;
    font-weight: 600;
}

/* Karta v katalogu – čistý textový štítek bez ohraničení */
.skoly-verif-lbl {
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: none;
    border: none;
    padding: 0;
}
.skoly-verif-lbl.is-navstiveno {
    color: #047857;
}
.skoly-verif-lbl.is-zkontrolovano {
    color: #1D4ED8;
}
.skoly-verif-lbl.is-auto {
    color: #94A3B8;
}
.obor-col-cap,
.obor-col-interest,
.obor-col-cutoff {
    display: flex;
    flex-direction: column;
}
.obor-cell-val {
    font-size: 0.9rem;
    font-weight: 800;
    color: #1E293B;
}
.obor-cell-sub {
    font-size: 0.76rem;
    color: #64748B;
    margin-top: 2px;
}
.obor-row-cutoff-num {
    font-size: 1.05rem;
    font-weight: 900;
    color: #C2410C;
}
.obor-row-cutoff-free {
    font-size: 0.92rem;
    font-weight: 850;
    color: #15803D;
}
.obor-row-cutoff-muted {
    font-size: 0.9rem;
    font-weight: 750;
    color: #334155;
}
.obor-row-cutoff-sub {
    font-size: 0.75rem;
    color: #64748B;
    margin-top: 2px;
}
.obor-col-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 750;
    color: #E07A22;
}
.obor-expand-chev {
    transition: transform 0.2s ease;
    color: #E07A22;
}
.obor-row-item[open] .obor-expand-chev {
    transform: rotate(180deg);
}

/* ROZBALENÝ DETAIL OBORU (3 OTEVŘENÉ SLOUPCE BEZ VNITŘNÍCH BOXŮ) */
.obor-row-body {
    padding: 4px 12px 20px;
    border-top: 1px dashed #E2E8F0;
}
.obor-detail-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding-top: 14px;
}
.obor-detail-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 12px;
    border-right: 1px solid #E2E8F0;
}
.obor-detail-col:last-child {
    border-right: none;
    padding-right: 0;
}
.obor-detail-col-title {
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748B;
    margin-bottom: 4px;
}
.obor-kv-line {
    font-size: 0.83rem;
    color: #475569;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    margin-bottom: 4px;
}
.obor-kv-line strong {
    color: #0F172A;
    font-weight: 750;
}
.obor-detail-text {
    font-size: 0.84rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

.obor-mobile-lbl {
    display: none;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94A3B8;
    margin-bottom: 2px;
}

/* Container queries pro responzivní tabulku oborů (podle modern-web-guidance: responsive-table) */
@container (max-width: 720px) {
    .obor-table-head {
        display: none;
    }
    .obor-mobile-lbl {
        display: block;
    }
    .obor-row-summary {
        grid-template-columns: 1fr 1fr;
        gap: 12px 14px;
        padding: 14px 8px;
    }
    .obor-col-main {
        grid-column: 1 / -1;
    }
    .obor-col-cutoff {
        grid-column: 1 / -1;
        padding-top: 8px;
        border-top: 1px solid #F1F5F9;
    }
    .obor-col-action {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: 4px;
    }
    .obor-detail-columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .obor-detail-col {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #E2E8F0;
        padding-bottom: 12px;
    }
    .obor-detail-col:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

/* ČISTÝ SPODNÍ BLOK PRO SPUŠTĚNÍ TESTU */
.school-clean-cta {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 26px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.school-clean-cta-text h3 {
    font-size: 1.18rem;
    font-weight: 850;
    color: #0F172A;
    margin: 0 0 4px;
}
.school-clean-cta-text p {
    font-size: 0.9rem;
    color: #64748B;
    margin: 0;
    max-width: 580px;
}

@media (max-width: 768px) {
    .school-profile-container {
        padding: 16px 12px 60px;
    }
    .school-stats-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .school-audit-photo {
        max-height: 240px;
    }
    .school-audit-title {
        font-size: 1.15rem;
    }
    .school-audit-editorial {
        gap: 12px;
        padding-top: 14px;
    }
    .audit-item-label {
        font-size: 0.72rem;
    }
    .audit-item-text {
        font-size: 0.85rem;
        line-height: 1.48;
    }
    .school-audit-dates-line {
        font-size: 0.8rem;
        margin-top: 14px;
        padding-top: 12px;
    }
    .school-main-card,
    .school-audit-section,
    .school-obory-group,
    .school-clean-cta {
        padding: 20px 16px;
        border-radius: 12px;
        margin-bottom: 18px;
    }
    .school-profile-title {
        font-size: 1.4rem;
        line-height: 1.25;
    }
}

@media (max-width: 520px) {
    .school-profile-container {
        padding: 12px 10px 50px;
    }
    .school-verif-line {
        font-size: 0.72rem;
        gap: 6px;
    }
    .skoly-card {
        padding: 16px 14px;
    }
    .skoly-obor-row-sub,
    .skoly-obor-row-pretlak {
        display: none;
    }
    .skoly-card-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .skoly-card-web-link {
        max-width: 100%;
    }
    .btn-skoly-detail {
        width: 100%;
        justify-content: center;
    }
    .school-stats-strip {
        grid-template-columns: 1fr 1fr;
        gap: 12px 10px;
        padding: 14px 12px;
    }
    .school-strip-lbl {
        font-size: 0.66rem;
    }
    .school-strip-val {
        font-size: 1.05rem;
    }
    .school-main-card,
    .school-audit-section,
    .school-obory-group,
    .school-clean-cta {
        padding: 16px 14px;
        border-radius: 10px;
        margin-bottom: 14px;
    }
    .school-profile-title {
        font-size: 1.25rem;
    }
    .school-clean-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .school-clean-cta .btn-diagonal {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================
   OTÁZKA Č. 29 NA MÍRU (AI PRE-FETCH & LOADING SPINNER)
   ========================================================== */
@property --arc-start {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@property --arc-end {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@property --progress-dash-animation {
    syntax: "*";
    inherits: false;
    initial-value: , progress-dash 3s ease-in-out infinite;
}

progress.loading-spinner:indeterminate::-webkit-progress-bar,
progress.loading-spinner:indeterminate::-webkit-progress-value {
    display: none;
    background: none;
}
progress.loading-spinner:indeterminate::-moz-progress-bar {
    display: none;
    background: none;
}

progress.loading-spinner:indeterminate {
    --_from: calc(90deg + var(--arc-start, 0deg));
    --_to: calc(90deg + var(--arc-end, 158deg));
    --size: 46px;
    --thickness: 4px;
    --spinner-color: #E07A22;
    --track-color: #FFEDD5;
    --spinner-duration: 1.4s;
    --_used-spinner-duration: var(--spinner-duration);

    display: inline-block;
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    appearance: none;
    border: 0;
    background: conic-gradient(
        from var(--_from),
        var(--spinner-color) calc(var(--_to) - var(--_from)),
        transparent 0
    ) var(--track-color);
    animation:
        progress-spin var(--_used-spinner-duration) linear infinite
        var(--progress-dash-animation, );
}

@supports (background-clip: border-area) {
    progress.loading-spinner:indeterminate {
        background-clip: border-area;
        border: var(--thickness) solid transparent;
        background-origin: border-box;
    }
}

@supports not (background-clip: border-area) {
    progress.loading-spinner:indeterminate {
        --clip-boundary: calc(100% - var(--thickness));
        -webkit-mask-image: radial-gradient(
            farthest-side,
            transparent var(--clip-boundary),
            black var(--clip-boundary)
        );
        mask-image: radial-gradient(
            farthest-side,
            transparent var(--clip-boundary),
            black var(--clip-boundary)
        );
        border: 0;
    }
}

@keyframes progress-spin {
    to {
        rotate: 1turn;
    }
}

@keyframes progress-dash {
    from {
        --arc-start: 0deg;
        --arc-end: 3deg;
    }
    50% {
        --arc-start: 100deg;
        --arc-end: 358deg;
    }
    to {
        --arc-start: 360deg;
        --arc-end: 363deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    progress.loading-spinner:indeterminate {
        --_used-spinner-duration: 6s;
    }
}

.q29-loading-card {
    background: linear-gradient(180deg, #FFFDF9 0%, #FFF7ED 100%);
    border: 1.5px solid #FED7AA;
    border-radius: 16px;
    padding: 36px 24px;
    text-align: center;
    margin-bottom: 28px;
    box-shadow: 0 8px 24px rgba(224, 122, 34, 0.06);
}

.q29-loading-title {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--text-dark);
    margin: 16px 0 8px 0;
}

.q29-loading-sub {
    font-size: 0.9rem;
    color: var(--text-body);
    max-width: 460px;
    margin: 0 auto;
    line-height: 1.55;
}

.q29-custom-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    color: #C2410C;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
}

.choice-multiselect-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    color: #4338CA;
    font-size: 0.76rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}

/* Podpora zobrazení statických profilů škol */
.school-profile-container, .school-page-container {
    max-width: 980px;
    margin: 0 auto;
    padding: 24px 0 64px;
}
.school-obory-cards-list, .school-obory-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.curriculum-total-row td {
    font-weight: 800 !important;
    background: #F1F5F9 !important;
    color: var(--text-dark) !important;
    border-top: 2px solid #CBD5E1 !important;
}
.school-breadcrumbs .current-crumb,
.school-breadcrumbs .active {
    color: var(--text-dark);
    font-weight: 700;
}

/* ========================================================== */
/* CHYTRÉ SCROLL-REVEAL ANIMACE PRO KAŽDOU KARTU              */
/* ========================================================== */
html.sr-enabled [data-sr] {
    opacity: 0;
    will-change: transform, opacity;
}

/* 1. Příběhové situace (každá jiný směr a úhel) */
html.sr-enabled [data-sr="story-left"] {
    transform: translateX(-45px) rotate(-2deg);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html.sr-enabled [data-sr="story-zoom"] {
    transform: scale(0.90) translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.34, 1.45, 0.64, 1), transform 0.7s cubic-bezier(0.34, 1.45, 0.64, 1);
}
html.sr-enabled [data-sr="story-right"] {
    transform: translateX(45px) rotate(2deg);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Procesní mapa (staggered kaskáda) */
html.sr-enabled [data-sr="step-1"] {
    transform: translateY(35px) rotate(-1deg);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}
html.sr-enabled [data-sr="step-arrow-1"] {
    transform: translateX(-15px);
    transition: opacity 0.5s ease 0.22s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.22s;
}
html.sr-enabled [data-sr="step-2"] {
    transform: scale(0.88) translateY(25px);
    transition: opacity 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 0.32s, transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1) 0.32s;
}
html.sr-enabled [data-sr="step-arrow-2"] {
    transform: translateX(-15px);
    transition: opacity 0.5s ease 0.48s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.48s;
}
html.sr-enabled [data-sr="step-3"] {
    transform: translateY(35px) rotate(1deg);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.58s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.58s;
}

/* 3. Cik-cak otázky (3D perspektiva a náklony) */
html.sr-enabled [data-sr="mock-tilt-left"] {
    transform: perspective(1000px) rotateY(-7deg) translateX(-50px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html.sr-enabled [data-sr="mock-tilt-right"] {
    transform: perspective(1000px) rotateY(7deg) translateX(50px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html.sr-enabled [data-sr="mock-spring"] {
    transform: scale(0.90) translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.34, 1.5, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.5, 0.64, 1);
}
html.sr-enabled [data-sr="info-right"] {
    transform: translateX(40px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}
html.sr-enabled [data-sr="info-left"] {
    transform: translateX(-40px);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

/* 4. Náhled reportu (prestižní 3D certifikát unfold) */
html.sr-enabled [data-sr="report-preview"] {
    transform: perspective(1200px) rotateX(6deg) scale(0.95) translateY(35px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.85s ease;
}

/* 5. 3 pasti při výběru (asymetrický vstup) */
html.sr-enabled [data-sr="trap-1"] {
    transform: translateX(-35px) rotate(-1.5deg);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
html.sr-enabled [data-sr="trap-2"] {
    transform: scale(0.88) translateY(25px);
    transition: opacity 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) 0.1s, transform 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) 0.1s;
}
html.sr-enabled [data-sr="trap-3"] {
    transform: scale(0.88) translateY(25px);
    transition: opacity 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) 0.18s, transform 0.7s cubic-bezier(0.34, 1.45, 0.64, 1) 0.18s;
}
html.sr-enabled [data-sr="trap-4"] {
    transform: translateX(35px) rotate(1.5deg);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

/* 6. 3 sloty na přihlášce (3 unikátní dynamiky) */
html.sr-enabled [data-sr="slot-ambition"] {
    transform: translateY(55px) scale(0.92);
    transition: opacity 0.75s cubic-bezier(0.34, 1.4, 0.64, 1), transform 0.75s cubic-bezier(0.34, 1.4, 0.64, 1);
}
html.sr-enabled [data-sr="slot-certainty"] {
    transform: scale(0.87) rotate(-1.5deg);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.12s, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}
html.sr-enabled [data-sr="slot-safehaven"] {
    transform: translateY(45px) rotate(2deg);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.24s, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.24s;
}

/* 7. FAQ sekce (hravý náběh otazníků) */
html.sr-enabled [data-sr="faq-section"] {
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
html.sr-enabled [data-sr="faq-section"] .faq-qmark {
    transform: scale(0) rotate(-25deg);
    opacity: 0;
    transition: transform 0.65s cubic-bezier(0.34, 1.6, 0.64, 1), opacity 0.45s ease;
}
html.sr-enabled [data-sr="faq-section"].sr-visible .faq-q1 { transition-delay: 0.15s; transform: scale(1) rotate(0); opacity: 0.95; }
html.sr-enabled [data-sr="faq-section"].sr-visible .faq-q2 { transition-delay: 0.25s; transform: scale(1) rotate(0); opacity: 0.90; }
html.sr-enabled [data-sr="faq-section"].sr-visible .faq-q3 { transition-delay: 0.35s; transform: scale(1) rotate(0); opacity: 0.85; }
html.sr-enabled [data-sr="faq-section"].sr-visible .faq-q4 { transition-delay: 0.20s; transform: scale(1) rotate(0); opacity: 0.95; }
html.sr-enabled [data-sr="faq-section"].sr-visible .faq-q5 { transition-delay: 0.30s; transform: scale(1) rotate(0); opacity: 0.90; }
html.sr-enabled [data-sr="faq-section"].sr-visible .faq-q-extra-l { transition-delay: 0.40s; transform: scale(1) rotate(0); opacity: 0.80; }

/* 8. Slovo zakladatele */
html.sr-enabled [data-sr="founder-card"] {
    transform: translateX(-35px) scale(0.96);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 9. Spodní CTA banner */
html.sr-enabled [data-sr="bottom-cta"] {
    transform: translateY(35px) scale(0.96);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s ease;
}

/* SPOLEČNÝ CÍLOVÝ STAV */
html.sr-enabled [data-sr].sr-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* Přístupnost: při preferenci omezeného pohybu ihned zobrazeno */
@media (prefers-reduced-motion: reduce) {
    html.sr-enabled [data-sr] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================== */
/* STRÁNKA O PROJEKTU - DESIGN SHODNÝ S HLAVNÍ STRÁNKOU (HOMEPAGE) */
/* ============================================================== */
.o-projektu-section {
    padding: 0 0 60px 0;
    animation: fadeIn 0.35s var(--ease-smooth);
}

.about-hero-card {
    margin-bottom: 32px;
}

.about-hero-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #CBD5E1;
    text-decoration: none;
    margin-bottom: 16px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    transition: all 0.25s ease;
    width: fit-content;
}

.about-hero-back:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateX(-2px);
}

.about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.70rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #FB923C;
    background: rgba(224, 122, 34, 0.14);
    border: 1px solid rgba(224, 122, 34, 0.3);
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 12px;
}

.about-hero-founder-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px 6px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    margin-top: 20px;
}

.about-pill-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
}

.about-pill-name {
    font-size: 0.86rem;
    font-weight: 800;
    color: #F8FAFC;
    line-height: 1.2;
}

.about-pill-sub {
    font-size: 0.72rem;
    color: #94A3B8;
    font-weight: 500;
}

.about-hero-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background: #FFFFFF;
}

.about-hero-img {
    max-width: 85%;
    max-height: 260px;
    object-fit: contain;
}

/* 1. KARTA PŘÍBĚHU VE STYLU STORY-ROW Z HLAVNÍ STRÁNKY */
.about-story-card {
    position: relative;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 4px;
    padding: 36px 40px 32px;
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}

.about-story-card .story-accent-tab {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-accent);
}

.about-founder-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F1F5F9;
}

.about-founder-avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FFF7ED;
    box-shadow: 0 6px 18px rgba(224, 122, 34, 0.15);
    background: #FFF7ED;
    flex-shrink: 0;
}

.about-badge-pill {
    display: inline-block;
    font-size: 0.70rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 3px;
    background: #FFF7ED;
    color: var(--color-accent);
    border: 1px solid #FFEDD5;
    margin-bottom: 6px;
}

.about-founder-name {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.2;
    margin: 0 0 4px 0;
}

.about-founder-role {
    font-size: 0.88rem;
    color: #64748B;
    font-weight: 600;
}

.about-lead-quote {
    font-size: 1.10rem;
    font-weight: 700;
    line-height: 1.55;
    color: #0F172A;
    font-style: italic;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: #F8FAFC;
    border-left: 3.5px solid var(--color-accent);
    border-radius: 3px;
}

.about-story-body {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #334155;
}

.about-story-body p {
    margin-bottom: 18px;
}

.about-story-body p:last-child {
    margin-bottom: 0;
}

.about-story-body strong {
    color: var(--text-dark);
    font-weight: 800;
}

.about-signature {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.about-signature-name {
    font-size: 1.05rem;
    font-weight: 850;
    color: var(--text-dark);
}

.about-signature-role {
    font-size: 0.82rem;
    color: #64748B;
}

.about-signature-note {
    font-size: 0.82rem;
    color: #94A3B8;
    font-style: italic;
}

/* 2. TŘI PILÍŘE */
.about-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 36px;
}

.about-pillar-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 4px;
    padding: 26px 22px;
    transition: transform 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.02);
}

.about-pillar-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
}

.about-pillar-icon {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: #FFF7ED;
    border: 1px solid #FFEDD5;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.about-pillar-title {
    font-size: 1.05rem;
    font-weight: 850;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.3;
}

.about-pillar-desc {
    font-size: 0.88rem;
    color: #64748B;
    line-height: 1.6;
}

/* 3. B2B ŠKOLY KARTA */
.about-b2b-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 4px;
    padding: 32px 34px;
    margin-bottom: 36px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.02);
}

.about-b2b-badge {
    display: inline-block;
    font-size: 0.70rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 3px;
    background: #F1F5F9;
    color: #334155;
    border: 1px solid #CBD5E1;
    margin-bottom: 12px;
}

.about-b2b-title {
    font-size: 1.30rem;
    font-weight: 900;
    color: var(--text-dark);
    line-height: 1.3;
    margin-bottom: 12px;
}

.about-b2b-desc {
    font-size: 0.92rem;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 22px;
}

.about-b2b-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-about-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 0.88rem;
    font-weight: 750;
    text-decoration: none;
    color: #FFFFFF;
    border-radius: 4px;
}

.btn-about-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    padding: 8px 12px;
    transition: color 0.2s ease;
}

.btn-about-secondary:hover {
    color: var(--color-accent-hover);
}

/* 4. TÝM PODPORA */
.about-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.about-team-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 4px;
    padding: 24px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.02);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.about-team-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
}

.about-team-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #FFFFFF;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.about-team-info {
    flex: 1;
}

.about-team-name {
    font-size: 1.08rem;
    font-weight: 850;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.about-team-role {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.about-team-bio {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.55;
}

/* 5. PRÁVNÍ KARTA */
.about-legal-card {
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 4px;
    padding: 24px 28px;
    margin-bottom: 32px;
}

.about-legal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.about-legal-header h3 {
    font-size: 1.05rem;
    font-weight: 850;
    margin: 0;
}

.about-legal-text {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 14px;
}

.about-legal-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.about-legal-links a {
    color: var(--color-accent);
    font-weight: 700;
    text-decoration: none;
}

.about-legal-links a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .about-hero-right {
        display: none;
    }
    .about-story-card {
        padding: 24px 20px;
    }
    .about-founder-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .about-pillars-grid {
        grid-template-columns: 1fr;
    }
    .about-team-grid {
        grid-template-columns: 1fr;
    }
    .about-team-card {
        flex-direction: column;
        gap: 12px;
    }
    .about-b2b-card {
        padding: 24px 20px;
    }
}

/* ==========================================================================
   MASTER MOBILE REFINEMENTS (FINAL SPECIFICITY OVERRIDES)
   ========================================================================== */
@media (max-width: 640px) {
    /* 1. Header & Navigation */
    header {
        padding: 10px 12px !important;
    }
    .header-content {
        gap: 6px !important;
    }
    .brand-link {
        font-size: 1.1rem !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .brand-icon {
        width: 20px !important;
        height: 20px !important;
    }
    .header-actions {
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    .nav-btn-katalog {
        font-size: 0.74rem !important;
        padding: 6px 9px !important;
        gap: 5px !important;
        border-radius: 8px !important;
    }
    .nav-btn-katalog svg {
        width: 14px !important;
        height: 14px !important;
    }
    .nav-text-desktop {
        display: none !important;
    }
    .nav-text-mobile {
        display: inline !important;
    }

    /* 2. Homepage: Trap Comparison Cards (icon above quote) */
    .trap-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .trap-card-icon-naked {
        width: 32px !important;
        height: 32px !important;
    }

    /* 3. Kontakt: Channel Cards (avatar above title) */
    .channel-card-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    .contact-channel-card {
        padding: 22px 18px 20px !important;
    }

    /* 4. Onboarding & Test Step 0: Protocol Cards & School Code */
    .onb-school-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 14px 16px !important;
    }
    .onb-school-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .onb-school-btn {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
    .onb-protocol-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 14px 16px !important;
    }

    /* 5. Modals */
    .modal-overlay {
        padding: 12px !important;
    }
    .modal-box {
        padding: 24px 18px !important;
        border-radius: 14px !important;
    }
    .email-report-modal-box {
        padding: 24px 18px !important;
        border-radius: 14px !important;
    }
    .email-report-modal-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    /* 6. Test progress header */
    .progress-meta {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .btn-test-top-restart {
        font-size: 0.74rem !important;
        padding: 4px 8px !important;
        gap: 4px !important;
    }
}

@media (max-width: 380px) {
    /* Extra narrow screens (iPhone SE, compact phones) */
    header {
        padding: 8px 10px !important;
    }
    .brand-link {
        font-size: 1.02rem !important;
        gap: 5px !important;
    }
    .brand-icon {
        width: 19px !important;
        height: 19px !important;
    }
    .header-actions {
        gap: 4px !important;
    }
    .nav-btn-katalog {
        font-size: 0.71rem !important;
        padding: 5px 7px !important;
        gap: 4px !important;
    }
    .nav-text-school-long {
        display: none !important;
    }
    .nav-text-school-short {
        display: inline !important;
    }
}




/* ==========================================================================
   MOBIL = STEJNÝ DESIGN JAKO PC, JEN PŘEHLEDNĚJI
   Bez levých pruhů na kartách, bez bočního posouvání, správné šipky.
   ========================================================================== */
html { overflow-x: clip; max-width: 100%; }
body { max-width: 100%; overflow-x: clip; }

@media (max-width: 860px) {
    /* Šipky mezi kroky: otáčí se ikona, ne buňka (buňku přepisují animace) */
    .process-arrow-cell {
        transform: none !important;
        width: 100% !important;
        margin: 4px auto !important;
        height: 28px !important;
    }
    .process-arrow-icon {
        transform: rotate(90deg) !important;
    }
}

@media (max-width: 640px) {
    /* Žádné barevné levé pruhy - karty vypadají jako na PC */
    .story-accent-tab { display: none !important; }
    .pers-quote-box,
    .archetype-hero-card,
    .rec-card,
    .parents-summary-box,
    .onb-founder-note,
    .landing-founder-card,
    .landing-schools-card,
    .onb-why-content,
    .school-b2b-card,
    .rs-action-banner,
    .school-timeline-box,
    .onb-protocol-card.rule-1,
    .onb-protocol-card.rule-2,
    .onb-protocol-card.rule-3 {
        border-left: 1.5px solid #E2E8F0 !important;
        border-radius: var(--radius-box) !important;
    }
    .onb-protocol-card { border-radius: var(--radius-box) !important; }

    /* Nic nesmí přetékat do boků */
    main, .page-container, section, .question-box, .info-page-card,
    .story-row-card, .trap-comparison-card, .sim-question-mock,
    .landing-founder-card, .bottom-cta-banner, .hero-split-grid {
        max-width: 100% !important;
        min-width: 0;
    }
    h1, h2, h3, h4, p, li { overflow-wrap: break-word; hyphens: manual; }
    .sim-question-mock, .question-box { transform: none !important; }
    .sim-zigzag-list, .cards-list { overflow: visible; }

    /* Ukázkové karty: stejné vyznění jako PC, jen menší odsazení */
    .story-row-card { grid-template-columns: 1fr; }
    .trap-comparison-card:hover,
    .story-row-card:hover { transform: none; }
}

/* Mobil: animace náběhu jen svisle (žádné boční posuvy a náklony) */
@media (max-width: 860px) {
    html.sr-enabled [data-sr] {
        transform: translateY(24px) !important;
    }
    html.sr-enabled [data-sr].sr-visible {
        transform: none !important;
    }
}

/* Ukázkové karty na úvodní stránce: tlačítko "Pokračovat" se nesmí lepit přes odpovědi */
@media (max-width: 640px) {
    .sim-question-mock .q-nav {
        position: static !important;
        margin: 12px 0 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .sim-question-mock .q-title { overflow-wrap: break-word; }
    .sim-question-mock span[style*="korun"],
    .sim-question-mock span[style*="FFF7ED"] { white-space: nowrap; flex-shrink: 0; }
    .sim-zigzag-list { gap: 28px; }
}

/* Mobil: cena má od začátku rezervované místo pro konečný stav animace,
   takže se při přejetí na 199 Kč nic neposouvá o řádek níž */
@media (max-width: 640px) {
    .hero-price-tag .hero-price-inner {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }
    .hero-price-tag .price-stage {
        flex-wrap: nowrap;
        white-space: nowrap;
        min-height: 20px;
        align-items: baseline;
        justify-content: center;
    }
    .hero-price-tag .price-final-wrap {
        max-width: 90px;
        transform: none;
    }
    .hero-price-tag .hero-price-subwrap {
        justify-content: center;
        min-height: 16px;
    }
}

/* Mobil: ilustrace s otazníkem je nad textem, ne pod ním */
@media (max-width: 780px) {
    .hero-split-grid { display: flex; flex-direction: column; }
    .hero-right-angled {
        order: -1;
        border-top: none !important;
        border-bottom: 1px solid var(--border-light);
        padding: 20px 24px 12px !important;
    }
    .hero-left-angled { order: 1; }
    .hero-right-angled img { max-width: 200px; margin: 0 auto; }
}

/* ==========================================================================
   PROFESIONÁLNÍ TISKOVÝ STYL A EXPORT DO PDF (@media print)
   Čistá knižní/dokumentová sazba na formát A4 bez rozsekávání karet,
   bez zbytečného plýtvání místem či černým inkoustem a bez webových tlačítek.
   ========================================================================== */
@page {
    size: A4 portrait;
    margin: 12mm 14mm 14mm 14mm;
}

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    html, body {
        background: #FFFFFF !important;
        color: #0F172A !important;
        font-size: 10pt !important;
        line-height: 1.45 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    main, .page-container, #reportView, .rs {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        background: #FFFFFF !important;
        border: none !important;
    }

    /* Skrytí veškerých webových ovládacích prvků, navigace a modálů (nikoliv <header class="rs-ch-head"> uvnitř kapitol!) */
    body > header,
    body > footer,
    .site-footer,
    #cookieBanner,
    .modal-overlay,
    .email-report-modal,
    .gatekeeper-screen,
    .sample-banner,
    .rs-action-banner,
    .rs-toc,
    .rs-topbar .rs-btn,
    .rs-topbar-meta,
    .rs-paywall-cta,
    .rs-dim-instruction,
    .rs-dim-tabs,
    .rs-school-link-cta,
    .rs-school-catalog-footer,
    .rs-print-hide,
    #btnRestartFull {
        display: none !important;
    }

    /* Horní hlavička dokumentu na 1. straně */
    .rs-topbar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1.5px solid #0F172A !important;
        border-radius: 0 !important;
        padding: 0 0 6px 0 !important;
        margin: 0 0 9px 0 !important;
        font-size: 10.5px !important;
    }
    .rs-topbar::after {
        content: "MůjObor.cz — Diagnostický profil a volba SŠ";
        font-size: 10px;
        font-weight: 700;
        color: #475569;
        letter-spacing: 0.02em;
    }

    /* Úvodní přehled + Radarový graf + 6 RIASEC skóre pohromadě na 1. straně */
    .rs-hero {
        display: grid !important;
        grid-template-columns: 1.38fr 0.82fr !important;
        gap: 9px !important;
        margin-bottom: 10px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-hero-main {
        padding: 12px 15px !important;
        border: 1px solid #CBD5E1 !important;
        border-radius: 5px !important;
        background: #FFFFFF !important;
    }
    .rs-hero-main::before {
        height: 3px !important;
    }
    .rs-kicker {
        font-size: 9px !important;
        margin-bottom: 4px !important;
    }
    .rs-kicker::before {
        width: 5px !important;
        height: 5px !important;
        box-shadow: none !important;
    }
    .rs-hero-code {
        font-size: 9.5px !important;
        padding: 2px 7px !important;
        margin-bottom: 6px !important;
    }
    .rs-hero-code strong {
        font-size: 11px !important;
    }
    .rs-hero h1 {
        font-size: 17px !important;
        line-height: 1.18 !important;
        margin: 0 0 5px 0 !important;
    }
    .rs-hero-sub {
        font-size: 10.8px !important;
        line-height: 1.38 !important;
        margin: 0 0 9px 0 !important;
    }
    .rs-summary {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding-top: 8px !important;
    }
    .rs-summary-item {
        padding: 5px 7px !important;
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
    }
    .rs-summary-label {
        font-size: 8px !important;
        margin-bottom: 1px !important;
    }
    .rs-summary-val {
        font-size: 10px !important;
        line-height: 1.22 !important;
    }
    .rs-hero-viz {
        padding: 8px 10px !important;
        border: 1px solid #CBD5E1 !important;
        border-radius: 5px !important;
        background: #FFFFFF !important;
    }
    .rs-hero-viz-caption {
        font-size: 8.5px !important;
        margin-bottom: 2px !important;
    }
    .rs-radar {
        max-width: 185px !important;
        max-height: 155px !important;
        margin: 0 auto !important;
    }
    .rs-numbers {
        grid-column: 1 / -1 !important;
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 5px !important;
        padding: 6px 8px !important;
        border: 1px solid #CBD5E1 !important;
        border-radius: 5px !important;
    }
    .rs-num {
        padding: 4px 6px !important;
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
    }
    .rs-num-head {
        margin-bottom: 2px !important;
    }
    .rs-num-code {
        font-size: 9px !important;
        padding: 1px 4px !important;
    }
    .rs-num-val {
        font-size: 11.5px !important;
    }
    .rs-num-val small {
        font-size: 8px !important;
    }
    .rs-num-name {
        font-size: 9px !important;
        margin-bottom: 3px !important;
    }
    .rs-num-bar {
        height: 3.5px !important;
    }

    /* Kapitoly: knižní členění bez vnějších rámečků, které by se lámaly v půlce strany */
    .rs-body, .rs-main {
        display: block !important;
        gap: 0 !important;
    }
    .rs-ch {
        background: transparent !important;
        border: none !important;
        border-top: 1.5px solid #CBD5E1 !important;
        border-radius: 0 !important;
        padding: 10px 0 4px 0 !important;
        margin: 0 0 8px 0 !important;
        break-inside: auto !important;
        page-break-inside: auto !important;
    }
    .rs-ch:first-of-type {
        border-top: none !important;
        padding-top: 0 !important;
    }
    /* Středně velké kapitoly držíme vždy pohromadě jako celek */
    #rs-ch-03,
    #rs-ch-04,
    #rs-ch-05,
    #rs-ch-06,
    #rs-ch-08,
    #rs-ch-09 {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-ch-head {
        display: flex !important;
        align-items: baseline !important;
        gap: 10px !important;
        padding-bottom: 5px !important;
        margin-bottom: 7px !important;
        border-bottom: 1px solid #E2E8F0 !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-ch-num {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
    .rs-ch-kicker {
        font-size: 8.5px !important;
        margin-bottom: 1px !important;
    }
    .rs-ch h2 {
        font-size: 14px !important;
        line-height: 1.22 !important;
    }
    .rs-ch-sub {
        font-size: 9.8px !important;
        margin-top: 2px !important;
        line-height: 1.32 !important;
    }
    .rs-prose {
        font-size: 10.4px !important;
        line-height: 1.45 !important;
        color: #1E293B !important;
    }
    .rs-prose p {
        margin: 0 0 5px 0 !important;
        orphans: 3;
        widows: 3;
    }

    /* Boxy a poznámky: nikdy nerozsekávat v polovině */
    .rs-callout {
        margin: 6px 0 0 0 !important;
        padding: 7px 11px !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
        border: 1px solid #E2E8F0 !important;
        border-left: 3.5px solid var(--rs-accent) !important;
        border-radius: 4px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-callout strong {
        font-size: 9px !important;
        margin-bottom: 1.5px !important;
    }

    /* Osobnostní paralela: světlá tisková úprava místo černého bloku */
    .rs-famous-card {
        margin-top: 7px !important;
        padding: 8px 11px !important;
        background: #F8FAFC !important;
        border: 1px solid #CBD5E1 !important;
        border-left: 3.5px solid #D97706 !important;
        border-radius: 5px !important;
        color: #0F172A !important;
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        gap: 10px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-famous-avatar {
        width: 28px !important;
        height: 28px !important;
        background: #FEF3C7 !important;
        border: 1px solid #FCD34D !important;
        color: #B45309 !important;
    }
    .rs-famous-avatar svg {
        width: 15px !important;
        height: 15px !important;
    }
    .rs-famous-kicker {
        font-size: 8px !important;
        color: #B45309 !important;
        margin-bottom: 1px !important;
    }
    .rs-famous-name {
        font-size: 11.5px !important;
        color: #0F172A !important;
        margin-bottom: 1px !important;
    }
    .rs-famous-role {
        font-size: 9px !important;
        color: #475569 !important;
        margin-bottom: 3px !important;
    }
    .rs-famous-why {
        font-size: 9.8px !important;
        line-height: 1.36 !important;
        color: #1E293B !important;
        margin-bottom: 3px !important;
    }
    .rs-famous-motto {
        font-size: 9.2px !important;
        color: #334155 !important;
        border-left: 2px solid #D97706 !important;
        padding-left: 7px !important;
    }

    /* Kapitola 02: 6 dimenzí RIASEC v přehledné 2sloupcové mřížce */
    .rs-dims {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }
    .rs-dim-detail {
        display: block !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        background: #FFFFFF !important;
        border: 1px solid #CBD5E1 !important;
        border-radius: 5px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-dim-head {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        gap: 8px !important;
        align-items: center !important;
        text-align: left !important;
        padding-bottom: 5px !important;
        margin-bottom: 5px !important;
    }
    .rs-dim-head-ring {
        width: 38px !important;
        height: 38px !important;
    }
    .rs-dim-head-kicker {
        font-size: 7.5px !important;
        margin-bottom: 1px !important;
        gap: 3px !important;
    }
    .rs-dim-head-titles h3 {
        font-size: 11px !important;
        margin: 0 0 1px 0 !important;
        line-height: 1.18 !important;
    }
    .rs-dim-head-sub {
        font-size: 9px !important;
        line-height: 1.26 !important;
    }
    .rs-dim-cols {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
        margin-top: 5px !important;
    }
    .rs-dim-box {
        padding: 5px 7px !important;
        background: #F8FAFC !important;
    }
    .rs-dim-box h4 {
        font-size: 7.5px !important;
        margin-bottom: 2px !important;
    }
    .rs-dim-list {
        gap: 1.5px !important;
        font-size: 8.6px !important;
    }
    .rs-dim-list li {
        padding-left: 8px !important;
        line-height: 1.24 !important;
    }
    .rs-dim-list li::before {
        width: 3px !important;
        height: 3px !important;
        top: 4px !important;
    }

    /* Kapitola 03: Gaussovy křivky percentilů (3 sloupce) */
    .rs-bell-explainer {
        padding: 7px 10px !important;
        font-size: 9.5px !important;
        margin-bottom: 8px !important;
        line-height: 1.35 !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-bells {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .rs-bell {
        padding: 8px 10px !important;
        background: #FFFFFF !important;
        border: 1px solid #CBD5E1 !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-bell-title {
        font-size: 10px !important;
    }
    .rs-bell-pct {
        font-size: 9.5px !important;
    }
    .rs-bell-svg {
        height: 48px !important;
    }
    .rs-bell-foot {
        font-size: 8px !important;
        margin-top: 2px !important;
    }

    /* Kapitola 04 a 06: Silné stránky a Bipolární škály */
    .rs-sw {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-sw-card {
        padding: 10px 12px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-sw-head {
        margin-bottom: 6px !important;
        gap: 7px !important;
    }
    .rs-sw-icon {
        width: 20px !important;
        height: 20px !important;
    }
    .rs-sw-head h3 {
        font-size: 12px !important;
    }
    .rs-sw-list {
        gap: 4px !important;
    }
    .rs-sw-list li {
        font-size: 10px !important;
        line-height: 1.36 !important;
        padding-left: 11px !important;
    }
    .rs-sw-list li::before {
        width: 4px !important;
        height: 4px !important;
        top: 5px !important;
    }
    .rs-bps {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    .rs-bp {
        padding: 8px 11px !important;
        background: #FFFFFF !important;
        border: 1px solid #CBD5E1 !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-bp-poles {
        margin-bottom: 6px !important;
    }
    .rs-bp-pole {
        font-size: 10px !important;
    }
    .rs-bp-pole small {
        font-size: 9px !important;
    }
    .rs-bp-track {
        height: 6px !important;
    }
    .rs-bp-dot {
        height: 11px !important;
        width: 4px !important;
    }
    .rs-bp-dot::before,
    .rs-bp-dot::after {
        display: none !important;
    }
    .rs-bp-note {
        font-size: 9.5px !important;
        margin-top: 6px !important;
        line-height: 1.32 !important;
    }
    .ratio-bar-wrap {
        height: 18px !important;
        margin-bottom: 5px !important;
    }
    .ratio-practice, .ratio-theory {
        font-size: 9.5px !important;
    }

    /* Kapitola 07: Strategie 3 přihlášek a žebříček profesí */
    .rs-school-cards {
        gap: 10px !important;
        margin-bottom: 12px !important;
    }
    .rs-school-card {
        padding: 11px 14px !important;
        border: 1px solid #CBD5E1 !important;
        border-radius: 5px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-school-card.is-primary {
        border-color: #D97706 !important;
        background: #FFFFFF !important;
    }
    .rs-school-top {
        margin-bottom: 5px !important;
        gap: 6px !important;
    }
    .rs-school-role {
        font-size: 9px !important;
        padding: 2px 7px !important;
        background: #F1F5F9 !important;
        color: #0F172A !important;
        border: 1px solid #CBD5E1 !important;
    }
    .rs-school-code, .rs-school-match {
        font-size: 9.5px !important;
        padding: 2px 6px !important;
    }
    .rs-school-title {
        font-size: 13.5px !important;
        margin-bottom: 2px !important;
    }
    .rs-school-type {
        font-size: 10px !important;
        margin-bottom: 5px !important;
    }
    .rs-school-why {
        font-size: 10.5px !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    .rs-school-grid {
        display: grid !important;
        grid-template-columns: 1.25fr 1fr !important;
        gap: 8px !important;
        padding-top: 7px !important;
    }
    .rs-school-box {
        padding: 7px 10px !important;
        background: #F8FAFC !important;
    }
    .rs-school-box > div:not(.rs-school-box-label) {
        font-size: 10px !important;
        line-height: 1.38 !important;
    }
    .rs-school-box-label {
        font-size: 8.5px !important;
        margin-bottom: 4px !important;
    }
    .rs-school-list.is-interactive-list {
        gap: 3px !important;
    }
    .rs-school-link {
        padding: 3px 4px !important;
        border: none !important;
        border-bottom: 1px solid #E2E8F0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    .rs-school-link-item:last-child .rs-school-link {
        border-bottom: none !important;
    }
    .rs-school-link-main {
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 8px !important;
    }
    .rs-school-link-name {
        font-size: 10px !important;
    }
    .rs-school-link-pills {
        padding-left: 0 !important;
        flex-shrink: 0 !important;
    }
    .rs-school-cermat-pill {
        font-size: 8.5px !important;
        padding: 1px 5px !important;
    }
    .rs-careers-heading {
        font-size: 12.5px !important;
        margin: 10px 0 6px 0 !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
    }
    .rs-bars {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    .rs-bar {
        padding: 6px 9px !important;
        gap: 7px !important;
        background: #FFFFFF !important;
        border: 1px solid #CBD5E1 !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-bar-title {
        font-size: 10px !important;
    }
    .rs-bar-tag {
        font-size: 8.5px !important;
        padding: 1px 5px !important;
    }
    .rs-bar-track {
        height: 4.5px !important;
    }
    .rs-bar-pct {
        font-size: 10.5px !important;
        min-width: 32px !important;
    }

    /* Kapitola 08 a 09: Semafor, Manuál pro rodiče a 4 otázky na DOD */
    .avoid-card {
        padding: 10px 13px !important;
        background: #FEF2F2 !important;
        border: 1px solid #FECACA !important;
        border-left: 3.5px solid #DC2626 !important;
        border-radius: 5px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .avoid-card h3 {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
    .avoid-item {
        margin-bottom: 6px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .avoid-item strong {
        font-size: 10.5px !important;
        margin-bottom: 1px !important;
    }
    .avoid-item p {
        font-size: 10px !important;
        line-height: 1.38 !important;
        margin: 0 !important;
    }
    .parents-summary-box {
        padding: 11px 14px !important;
        margin-bottom: 10px !important;
        background: #F8FAFC !important;
        border: 1px solid #CBD5E1 !important;
        border-left: 3.5px solid var(--rs-accent) !important;
        border-radius: 5px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .parents-summary-box h3 {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
    .parents-summary-box ul {
        gap: 4px !important;
    }
    .parents-summary-box li {
        font-size: 10px !important;
        line-height: 1.38 !important;
        padding-left: 13px !important;
    }
    .rs-steps-box {
        padding: 11px 14px !important;
        margin-top: 8px !important;
        background: #F8FAFC !important;
        color: #0F172A !important;
        border: 1px solid #CBD5E1 !important;
        border-radius: 5px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-steps-box .rs-ch-kicker {
        color: #B45309 !important;
    }
    .rs-steps-box h3 {
        font-size: 12px !important;
        color: #0F172A !important;
        margin: 2px 0 7px 0 !important;
    }
    .rs-steps-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
    }
    .rs-step {
        padding: 7px 9px !important;
        background: #FFFFFF !important;
        border: 1px solid #E2E8F0 !important;
        gap: 7px !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
    .rs-step-num {
        width: 19px !important;
        height: 19px !important;
        font-size: 10px !important;
        background: #FEF3C7 !important;
        border: 1px solid #F59E0B !important;
        color: #92400E !important;
    }
    .rs-step-text {
        font-size: 9.5px !important;
        line-height: 1.35 !important;
        color: #1E293B !important;
    }
}