:root {
    --pk-bg: #f2f5fb;
    --pk-surface: #ffffff;
    --pk-surface-soft: #f8fbff;
    --pk-border: #d8e2f2;
    --pk-border-strong: #c2d4ee;
    --pk-text: #12213e;
    --pk-muted: #5d7298;
    --pk-primary: #1f56e0;
    --pk-primary-strong: #1845b4;
    --pk-radius-sm: 12px;
    --pk-radius-md: 16px;
    --pk-radius-lg: 24px;
    --pk-shadow-sm: 0 12px 28px rgba(16, 31, 66, 0.08);
    --pk-shadow-md: 0 22px 52px rgba(15, 30, 64, 0.14);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
    color: var(--pk-text);
    line-height: 1.65;
    background:
        radial-gradient(circle at 8% -18%, rgba(170, 212, 255, 0.42), rgba(170, 212, 255, 0) 45%),
        radial-gradient(circle at 94% 0%, rgba(184, 255, 230, 0.36), rgba(184, 255, 230, 0) 40%),
        linear-gradient(180deg, #f2f6fc 0%, #f8fbff 100%);
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
    color: #0f1d37;
    letter-spacing: -0.02em;
}

a {
    color: #1a45b5;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #113184;
}

.container {
    max-width: 1160px;
}

.text-muted {
    color: var(--pk-muted) !important;
}

.site-header {
    border-bottom: 1px solid rgba(191, 206, 231, 0.8);
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    z-index: 1030;
}

.site-topbar {
    border-bottom: 1px solid rgba(196, 210, 234, 0.6);
    background: linear-gradient(90deg, rgba(239, 247, 255, 0.86), rgba(241, 255, 249, 0.86));
    color: #4d6388;
}

.site-topbar .container {
    min-height: 34px;
}

.site-navbar {
    background: transparent;
}

.site-logo,
.footer-logo {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.brand-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-title {
    font-size: 1.03rem;
    font-weight: 700;
}

.brand-subtitle {
    font-size: 0.74rem;
    color: #60759c;
}

.nav-main {
    gap: 0.28rem;
}

.nav-main .nav-link {
    font-weight: 600;
    color: #2b426d;
    border-radius: 999px;
    padding: 0.5rem 0.88rem;
}

.nav-main .nav-link:hover,
.nav-main .nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, var(--pk-primary), #4a77ef);
    box-shadow: 0 10px 24px rgba(31, 86, 224, 0.23);
}

.navbar-toggler {
    border-color: #c3d5f0;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.24rem rgba(31, 86, 224, 0.15);
}

.site-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: min(440px, 100%);
}

.site-search .btn {
    white-space: nowrap;
}

.site-search .form-control {
    background: #fff;
}

.site-main {
    min-height: 64vh;
}

.form-control,
.form-select,
.btn,
.badge,
.alert,
.accordion-item,
.accordion-button,
.page-link {
    border-radius: var(--pk-radius-sm);
}

.form-control,
.form-select {
    border: 1px solid var(--pk-border);
    padding: 0.68rem 0.86rem;
    color: var(--pk-text);
}

.form-control:focus,
.form-select:focus {
    border-color: #8eaef0;
    box-shadow: 0 0 0 0.24rem rgba(31, 86, 224, 0.16);
}

.form-text {
    color: #667fa7;
    font-size: 0.79rem;
}

.btn {
    font-weight: 600;
    border-width: 1px;
}

.btn-primary {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--pk-primary), #4674ef);
    box-shadow: 0 12px 24px rgba(31, 86, 224, 0.24);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background: linear-gradient(135deg, var(--pk-primary-strong), #2f5fd8);
}

.btn-outline-primary {
    color: var(--pk-primary);
    border-color: #9fb8ea;
    background: #fff;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #12358f;
    border-color: #84a6e6;
    background: #edf4ff;
}

.badge-soft {
    background: #edf3ff;
    color: #1944af;
    border: 1px solid #c8d9f7;
    font-weight: 600;
}

.section-block {
    margin-bottom: 1.8rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-title {
    margin-bottom: 0;
    font-size: 1.35rem;
    font-weight: 700;
}

.card-soft {
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-md);
    background: linear-gradient(180deg, #fff 0%, var(--pk-surface-soft) 100%);
    box-shadow: var(--pk-shadow-sm);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-soft:hover {
    border-color: var(--pk-border-strong);
    box-shadow: var(--pk-shadow-md);
}

.card-soft .card-body {
    padding: 1rem 1.1rem 1.1rem;
}

.card-thumb-wrap {
    display: block;
    padding: 0.75rem 0.75rem 0;
}

.card-thumb {
    width: 100%;
    height: 194px;
    object-fit: cover;
    border: 1px solid #d5e2f5;
    border-radius: 14px;
    background: #ecf3ff;
}

.hero-home {
    position: relative;
    overflow: hidden;
    border-radius: var(--pk-radius-lg);
    color: #fff;
    background:
        radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 40%),
        radial-gradient(circle at 14% 92%, rgba(247, 188, 40, 0.18), rgba(247, 188, 40, 0) 36%),
        linear-gradient(128deg, #0f766e 0%, #125f95 45%, #1f57e1 100%);
    box-shadow: 0 28px 62px rgba(13, 34, 78, 0.28);
}

.hero-home::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: inherit;
    pointer-events: none;
}

.hero-home .hero-content {
    position: relative;
    z-index: 1;
    padding: 2.2rem;
}

.hero-home h1 {
    color: #fff;
    font-size: clamp(2rem, 3.2vw, 3rem);
    margin-bottom: 0.9rem;
}

.hero-home p {
    color: rgba(235, 245, 255, 0.95);
    max-width: 54ch;
}

.hero-home .hero-search {
    margin-top: 1.25rem;
    display: flex;
    align-items: stretch;
    gap: 0.62rem;
}

.hero-home .hero-search > div {
    flex: 1;
}

.hero-home .hero-search .form-control {
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.95);
}

.hero-home .hero-kpis {
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.hero-home .hero-kpi {
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.14);
    padding: 0.76rem;
}

.hero-home .hero-kpi strong {
    display: block;
    color: #fff;
    font-size: 1.23rem;
    line-height: 1.1;
}

.hero-home .hero-kpi span {
    color: rgba(239, 247, 255, 0.94);
    font-size: 0.77rem;
}

.hero-sidebar {
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    padding: 1rem;
}

.hero-sidebar-title {
    display: flex;
    align-items: center;
    gap: 0.54rem;
    margin-bottom: 0.85rem;
    color: #fff;
    font-weight: 700;
}

.hero-sidebar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #24ebb8;
    box-shadow: 0 0 0 6px rgba(36, 235, 184, 0.2);
}

.hero-sidebar-item {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.54rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.hero-sidebar-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}

.hero-sidebar-item strong {
    display: block;
    font-size: 0.9rem;
}

.hero-sidebar-item small {
    display: block;
    color: rgba(236, 246, 255, 0.89);
}

.quick-feature {
    height: 100%;
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-md);
    background: #fff;
    box-shadow: var(--pk-shadow-sm);
    padding: 1rem;
}

.quick-feature h3 {
    font-size: 1rem;
    margin-bottom: 0.45rem;
}

.quick-feature p {
    color: var(--pk-muted);
    font-size: 0.92rem;
    margin-bottom: 0.55rem;
}

.quick-feature a {
    font-weight: 700;
}

.page-hero {
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-lg);
    background:
        radial-gradient(circle at 100% 0%, rgba(31, 86, 224, 0.08), rgba(31, 86, 224, 0)),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: var(--pk-shadow-sm);
    padding: 1.5rem;
}

.page-hero h1 {
    font-size: clamp(1.56rem, 3vw, 2.28rem);
    margin-bottom: 0.46rem;
}

.page-hero p {
    margin-bottom: 0;
    color: var(--pk-muted);
}

.page-toolbar {
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-md);
    background: #fff;
    box-shadow: var(--pk-shadow-sm);
    padding: 1rem;
}

.calc-card-visual {
    position: relative;
    min-height: 174px;
    border-radius: 14px;
    border: 1px solid #d3e2f6;
    padding: 0.9rem;
    overflow: hidden;
    background: linear-gradient(145deg, var(--tone-a, #1f56e0), var(--tone-b, #4d7aef));
    color: #fff;
}

.calc-card-visual::before {
    content: "";
    position: absolute;
    top: -22px;
    right: -22px;
    width: 88px;
    height: 88px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.18);
    transform: rotate(18deg);
}

.calc-card-visual::after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: -16px;
    width: 120px;
    height: 120px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.12);
    transform: rotate(-12deg);
}

.calc-card-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 34px;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.calc-card-label {
    position: absolute;
    left: 0.9rem;
    bottom: 0.9rem;
    z-index: 1;
    font-weight: 700;
    font-size: 0.92rem;
    color: rgba(242, 248, 255, 0.97);
}

.calc-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #fff;
    background: linear-gradient(145deg, var(--tone-a, #1f56e0), var(--tone-b, #4d7aef));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.calc-page-visual {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-width: 170px;
    padding: 0.8rem;
    border-radius: 14px;
    border: 1px solid #d2e0f6;
    background: linear-gradient(145deg, var(--tone-a, #1f56e0), var(--tone-b, #4d7aef));
    color: #fff;
}

.calc-page-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    min-height: 32px;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.74rem;
    font-weight: 800;
}

.calc-page-label {
    margin-top: 0.42rem;
    font-size: 0.85rem;
    color: rgba(242, 248, 255, 0.95);
}

.calc-tone-finance { --tone-a: #1d4ed8; --tone-b: #2563eb; }
.calc-tone-credit { --tone-a: #0f766e; --tone-b: #0284c7; }
.calc-tone-tax { --tone-a: #ea580c; --tone-b: #ef4444; }
.calc-tone-savings { --tone-a: #0f766e; --tone-b: #16a34a; }
.calc-tone-inflation { --tone-a: #b91c1c; --tone-b: #7c3aed; }
.calc-tone-fuel { --tone-a: #0369a1; --tone-b: #0ea5e9; }
.calc-tone-trip { --tone-a: #0f766e; --tone-b: #0f4c81; }
.calc-tone-auto { --tone-a: #1e3a8a; --tone-b: #0f172a; }
.calc-tone-health { --tone-a: #7c3aed; --tone-b: #2563eb; }
.calc-tone-calories { --tone-a: #db2777; --tone-b: #ea580c; }
.calc-tone-family { --tone-a: #9333ea; --tone-b: #ec4899; }
.calc-tone-currency { --tone-a: #1d4ed8; --tone-b: #0891b2; }
.calc-tone-work { --tone-a: #1f2937; --tone-b: #334155; }
.calc-tone-interest { --tone-a: #166534; --tone-b: #0f766e; }
.calc-tone-loan { --tone-a: #1e40af; --tone-b: #312e81; }
.calc-tone-default { --tone-a: #334155; --tone-b: #2563eb; }

.trending-list,
.clean-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.trending-list li,
.clean-list li {
    border-bottom: 1px solid #e2ebf8;
    padding: 0.66rem 0;
}

.trending-list li:last-child,
.clean-list li:last-child {
    border-bottom: 0;
}

.trending-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid #d2e1f6;
    background: #edf4ff;
    flex-shrink: 0;
}

.article-cover {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--pk-border);
    background: #ebf3ff;
}

.article-cover img {
    width: 100%;
    height: clamp(210px, 33vw, 380px);
    object-fit: cover;
    display: block;
}

.table-of-contents {
    border: 1px solid #ccdaf4;
    border-left: 4px solid #6f93e5;
    border-radius: 12px;
    background: #edf4ff;
    padding: 0.9rem;
}

.table-of-contents li {
    margin-bottom: 0.42rem;
}

.table-of-contents li:last-child {
    margin-bottom: 0;
}

.article-content,
.calculator-content {
    line-height: 1.84;
}

.article-content h2,
.article-content h3,
.calculator-content h2,
.calculator-content h3 {
    margin-top: 1.6rem;
    margin-bottom: 0.65rem;
}

.article-content p,
.calculator-content p {
    margin-bottom: 0.92rem;
}

.article-content .lead {
    color: #33507e;
    font-size: 1.04rem;
}

.calculator-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1rem;
}

.calc-panel,
.calc-result-panel {
    border: 1px solid var(--pk-border);
    border-radius: var(--pk-radius-md);
    background: #fff;
    box-shadow: var(--pk-shadow-sm);
}

#kalkulator,
#rezultat {
    scroll-margin-top: 92px;
}

.calc-panel {
    padding: 1rem;
}

.calc-result-panel {
    padding: 1rem;
    position: sticky;
    top: 96px;
    align-self: start;
}

.input-section-title {
    font-size: 0.95rem;
    color: #123772;
    font-weight: 700;
}

.calc-submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-top: 1px solid #e0e9f7;
    padding-top: 0.8rem;
}

.calc-required-note {
    border: 1px solid #c7dcff;
    background: linear-gradient(180deg, #f3f8ff, #edf5ff);
    color: #1a437f;
    font-size: 0.88rem;
}

.calc-main-result {
    border: 1px solid #c7d8f5;
    border-radius: 14px;
    background: linear-gradient(180deg, #f4f8ff 0%, #eef4ff 100%);
    padding: 1rem;
    margin-bottom: 0.8rem;
}

.calc-main-result .label {
    color: #3a5f96;
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.calc-main-result .value {
    font-size: clamp(2rem, 3.8vw, 2.8rem);
    line-height: 1.08;
    font-weight: 800;
    color: #174bbd;
}

.calc-main-result .desc {
    color: #5676ac;
    margin-bottom: 0;
    font-size: 0.88rem;
}

.calc-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.calc-kpi {
    border: 1px solid #d4e2f8;
    border-radius: 12px;
    background: #fff;
    padding: 0.62rem 0.65rem;
}

.calc-kpi .name {
    display: block;
    color: #5b739c;
    font-size: 0.75rem;
    margin-bottom: 0.2rem;
}

.calc-kpi .number {
    display: block;
    font-weight: 700;
    color: #102448;
    line-height: 1.2;
}

.calc-kpi .hint {
    display: block;
    font-size: 0.72rem;
    color: #6e85ac;
    margin-top: 0.18rem;
}

.calc-result-empty {
    border: 1px dashed #c6d7f4;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff, #f3f8ff);
    padding: 0.95rem;
    color: #536b96;
    font-size: 0.9rem;
}

.calc-list,
.calc-list-tips {
    margin-bottom: 0;
    padding-left: 1.1rem;
}

.calc-list li,
.calc-list-tips li {
    margin-bottom: 0.45rem;
}

.calc-list li:last-child,
.calc-list-tips li:last-child {
    margin-bottom: 0;
}

.calc-list-tips li::marker {
    color: #0f766e;
}

.calc-box {
    border: 1px solid #d7e4f8;
    border-radius: 14px;
    background: #fff;
    padding: 0.85rem;
}

.salary-progress {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #d0def5;
    background: #edf3ff;
}

.salary-progress-state {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.salary-progress-employee {
    background: linear-gradient(90deg, #10b981, #22c55e);
}

.bmi-scale {
    width: 100%;
}

.bmi-scale-track {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background: #edf2fb;
    overflow: hidden;
}

.bmi-scale-segment {
    position: absolute;
    top: 0;
    bottom: 0;
}

.bmi-segment-under {
    background: linear-gradient(90deg, #5aa7ff, #2f76d5);
}

.bmi-segment-normal {
    background: linear-gradient(90deg, #4ec67a, #2e9f5c);
}

.bmi-segment-over {
    background: linear-gradient(90deg, #f3d45c, #dca218);
}

.bmi-segment-obese {
    background: linear-gradient(90deg, #ff8a8a, #d14646);
}

.bmi-scale-marker {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 22px;
    background: #0f1d37;
    box-shadow: 0 0 0 3px rgba(15, 29, 55, 0.12);
    border-radius: 2px;
    transform: translateX(-50%);
}

.bmi-scale-legend {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.3rem;
    margin-top: 0.5rem;
    font-size: 0.71rem;
    color: #5b739c;
}

.calc-scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.calc-scenario-card {
    border: 1px dashed #bed2f4;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    padding: 0.65rem;
}

.calc-scenario-card small {
    display: block;
    color: #5f78a3;
}

.calc-scenario-card strong {
    display: block;
    margin-top: 0.18rem;
    color: #102448;
}

.calc-scenario-card span {
    display: block;
    margin-top: 0.14rem;
    font-size: 0.74rem;
    color: #6a81aa;
}

.result-highlight {
    animation: resultPulse 0.65s ease;
}

@keyframes resultPulse {
    0% {
        transform: scale(0.97);
        box-shadow: 0 0 0 rgba(31, 86, 224, 0.12);
    }
    70% {
        transform: scale(1.01);
        box-shadow: 0 0 0 12px rgba(31, 86, 224, 0);
    }
    100% {
        transform: scale(1);
    }
}

.ad-slot,
.ad-demo,
.ad-placeholder {
    border: 1px dashed #c2d4f2;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8fbff, #f4fff9);
    color: #5b7399;
    padding: 0.95rem;
    text-align: center;
}

.faq-accordion .accordion-item {
    border: 1px solid #d6e3f8;
    border-radius: 12px !important;
    margin-bottom: 0.52rem;
    overflow: hidden;
}

.faq-accordion .accordion-button {
    font-weight: 600;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background: #ecf3ff;
    color: #123c97;
    box-shadow: none;
}

.pagination {
    gap: 0.24rem;
}

.page-link {
    border-color: #c9d8f0;
    color: #1e429f;
    font-weight: 600;
}

.page-item.active .page-link {
    color: #fff;
    border: 0;
    background: linear-gradient(135deg, var(--pk-primary), #4f77ec);
}

.breadcrumb {
    margin-bottom: 0.9rem;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #9cb0d2;
}

.breadcrumb-item.active {
    color: #637aa1;
}

.site-footer {
    border-top: 1px solid rgba(155, 177, 216, 0.3);
    background:
        radial-gradient(circle at 5% 95%, rgba(15, 118, 110, 0.2), rgba(15, 118, 110, 0)),
        linear-gradient(180deg, #111f3d, #0c1630);
    color: #dbe7ff;
}

.site-footer .text-light-emphasis {
    color: #a8b9da !important;
}

.footer-links a {
    color: #bed2ff;
}

.mobile-sticky-ad {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 1050;
}

[data-search-suggestions] {
    z-index: 2200;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid #c9d8f1;
    border-radius: 12px;
}

[data-search-suggestions] .list-group-item {
    border-left: 0;
    border-right: 0;
}

@media (max-width: 1199px) {
    .calculator-wrap {
        grid-template-columns: minmax(0, 1fr) 330px;
    }
}

@media (max-width: 991px) {
    .site-topbar {
        display: none !important;
    }

    .site-search {
        width: 100%;
        margin-top: 0.6rem;
    }

    .hero-home .hero-content {
        padding: 1.45rem;
    }

    .hero-home .hero-search {
        flex-direction: column;
    }

    .hero-home .hero-search .btn {
        width: 100%;
    }

    .hero-home .hero-kpis {
        grid-template-columns: 1fr;
    }

    .calculator-wrap {
        grid-template-columns: 1fr;
    }

    .calc-result-panel {
        position: static;
    }

    .calc-page-visual {
        min-width: 140px;
    }

    .calc-scenario-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-thumb,
    .calc-card-visual {
        height: 176px;
        min-height: 176px;
    }
}

@media (min-width: 861px) and (max-width: 991px) {
    .calculator-wrap {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .calc-result-panel {
        position: sticky;
        top: 96px;
    }
}

@media (max-width: 575px) {
    .brand-subtitle {
        display: none;
    }

    .brand-title {
        font-size: 0.95rem;
    }

    .site-logo,
    .footer-logo {
        width: 40px;
        height: 40px;
    }

    .hero-home .hero-content {
        padding: 1.2rem;
    }

    .hero-home h1 {
        font-size: 2rem;
    }

    .calc-kpi-grid,
    .calc-scenario-grid {
        grid-template-columns: 1fr;
    }

    .calc-avatar {
        width: 42px;
        height: 42px;
    }

}


/* START Salary Premium Block */
.salary-premium-page {
    max-width: 1220px;
    margin: 0 auto;
}

.salary-premium-page .salary-hero {
    position: relative;
    border: 1px solid #d9e5fb;
    border-radius: 22px;
    background:
        radial-gradient(circle at 92% 18%, rgba(58, 90, 246, 0.18), rgba(58, 90, 246, 0) 42%),
        radial-gradient(circle at 8% 88%, rgba(35, 167, 255, 0.14), rgba(35, 167, 255, 0) 40%),
        linear-gradient(180deg, #ffffff, #f7faff);
    box-shadow: 0 22px 48px rgba(22, 48, 105, 0.12);
    padding: 1.75rem;
    overflow: hidden;
}

.salary-premium-page .salary-hero::after {
    content: "";
    position: absolute;
    right: -24px;
    top: -24px;
    width: 120px;
    height: 120px;
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(69, 96, 247, 0.18), rgba(50, 189, 248, 0.12));
    transform: rotate(16deg);
    pointer-events: none;
}

.salary-premium-page .salary-hero-copy h1 {
    font-size: clamp(2rem, 3.1vw, 2.8rem);
    margin-bottom: 0.65rem;
    color: #0f1f42;
}

.salary-premium-page .salary-hero-copy p {
    max-width: 62ch;
    color: #4d6390;
    margin-bottom: 0;
}

.salary-premium-page .salary-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.72rem;
    border-radius: 999px;
    border: 1px solid #bfd3fb;
    color: #1844b0;
    background: #edf4ff;
    font-weight: 600;
    font-size: 0.82rem;
    margin-bottom: 0.8rem;
}

.salary-premium-page .salary-hero-insights {
    min-width: 260px;
    border: 1px solid #d4e2fb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 16px 34px rgba(26, 55, 122, 0.1);
    padding: 0.95rem 1rem;
}

.salary-premium-page .salary-hero-insights h2 {
    font-size: 0.98rem;
    margin-bottom: 0.65rem;
    color: #142f6a;
}

.salary-premium-page .salary-hero-insights ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.52rem;
}

.salary-premium-page .salary-hero-insights li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #4c638f;
    border-top: 1px solid #edf3ff;
    padding-top: 0.52rem;
}

.salary-premium-page .salary-hero-insights li:first-child {
    border-top: 0;
    padding-top: 0;
}

.salary-premium-page .salary-hero-insights strong {
    color: #1a3f97;
}

.salary-premium-page .calculator-wrap {
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 1.2rem;
    align-items: start;
}

.salary-premium-page .salary-form-panel {
    border-radius: 18px;
    border: 1px solid #d8e4fa;
    background: linear-gradient(180deg, #ffffff, #f9fbff);
    box-shadow: 0 18px 36px rgba(22, 48, 105, 0.1);
    padding: 1.45rem;
}

.salary-premium-page .salary-form-panel .calculator-form-grid {
    row-gap: 1.05rem;
}

.salary-premium-page .salary-form-panel .form-label {
    font-weight: 600;
    color: #153269;
    margin-bottom: 0.44rem;
    font-size: 0.92rem;
}

.salary-premium-page .salary-form-panel .form-control,
.salary-premium-page .salary-form-panel .form-select {
    border: 1px solid #cbdaf8;
    border-radius: 13px;
    background: #ffffff;
    padding: 0.72rem 0.85rem;
    min-height: 48px;
    box-shadow: inset 0 1px 1px rgba(16, 33, 71, 0.03);
}

.salary-premium-page .salary-form-panel .form-control:focus,
.salary-premium-page .salary-form-panel .form-select:focus {
    border-color: #6f92ec;
    box-shadow: 0 0 0 0.22rem rgba(60, 95, 230, 0.16);
}

.salary-premium-page .salary-form-panel .form-text {
    color: #6b80a8;
    font-size: 0.77rem;
    margin-top: 0.32rem;
    line-height: 1.45;
}

.salary-premium-page .salary-form-panel .input-section-title {
    color: #14306c;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.salary-premium-page .salary-required-note {
    border: 1px solid #cadcfb;
    background: linear-gradient(180deg, #f3f8ff, #eef5ff);
    color: #1a3f95;
    border-radius: 13px;
    font-size: 0.88rem;
}

.salary-premium-page .salary-form-intro {
    border: 1px solid #d8e4fb;
    border-radius: 14px;
    background: linear-gradient(180deg, #fafdff, #f5f9ff);
    padding: 0.78rem 0.85rem;
}

.salary-premium-page .salary-form-intro-text {
    color: #5b749f;
    font-size: 0.82rem;
}

.salary-premium-page .salary-advanced-toggle-btn {
    border-radius: 12px;
    border-color: #93b1ee;
    color: #1941a0;
    font-weight: 600;
    padding: 0.62rem 0.95rem;
    background: linear-gradient(180deg, #ffffff, #f4f8ff);
}

.salary-premium-page .salary-advanced-toggle-btn:hover,
.salary-premium-page .salary-advanced-toggle-btn:focus {
    border-color: #6f92ec;
    color: #143888;
    background: linear-gradient(180deg, #f8fbff, #edf4ff);
}

.salary-premium-page .salary-advanced-content-card {
    border: 1px solid #d7e4fb;
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(19, 46, 108, 0.06);
    padding: 0.9rem;
    margin-top: 0.5rem;
}

.salary-premium-page .salary-cta-wrap {
    display: grid;
    gap: 0.5rem;
}

.salary-premium-page .salary-cta-btn {
    width: 100%;
    max-width: 320px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    padding: 0.84rem 1.1rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #2351d7, #3f63ea 58%, #475af2);
    box-shadow: 0 16px 30px rgba(35, 81, 215, 0.28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.salary-premium-page .salary-cta-btn:hover,
.salary-premium-page .salary-cta-btn:focus {
    color: #ffffff;
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(35, 81, 215, 0.35);
}

.salary-premium-page .salary-cta-note {
    color: #6780ab;
    font-size: 0.79rem;
}

.salary-premium-page .salary-result-panel {
    border-radius: 20px;
    border: 1px solid #d5e3fc;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 22px 45px rgba(20, 46, 108, 0.14);
    padding: 1rem;
    position: sticky;
    top: 96px;
}

.salary-premium-page .salary-main-result {
    border: 1px solid #cde0ff;
    border-radius: 16px;
    background: linear-gradient(145deg, #eef5ff, #f7fbff);
    padding: 1rem;
    margin-bottom: 0.7rem;
}

.salary-premium-page .salary-main-result .label {
    color: #3a5e9a;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 0.36rem;
}

.salary-premium-page .salary-main-result .value {
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    line-height: 1.05;
    font-weight: 800;
    color: #1548bd;
    letter-spacing: -0.02em;
}

.salary-premium-page .salary-main-result .desc {
    margin-bottom: 0;
    margin-top: 0.42rem;
    color: #5c76a5;
    font-size: 0.86rem;
}

.salary-premium-page .salary-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.7rem;
}

.salary-premium-page .salary-kpi {
    border: 1px solid #d7e4fb;
    border-radius: 13px;
    background: #ffffff;
    padding: 0.64rem 0.68rem;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.salary-premium-page .salary-kpi:hover {
    transform: translateY(-1px);
    border-color: #c0d4fa;
    box-shadow: 0 12px 22px rgba(19, 47, 111, 0.1);
}

.salary-premium-page .salary-kpi .name {
    display: block;
    color: #5f77a4;
    font-size: 0.74rem;
    margin-bottom: 0.2rem;
}

.salary-premium-page .salary-kpi .number {
    display: block;
    color: #0f2246;
    font-weight: 700;
    line-height: 1.2;
}

.salary-premium-page .salary-kpi .hint {
    display: block;
    color: #6f86ad;
    font-size: 0.7rem;
    margin-top: 0.16rem;
}

.salary-premium-page .salary-summary-table-wrap,
.salary-premium-page .salary-breakdown-card,
.salary-premium-page .salary-yearly-card,
.salary-premium-page .salary-scenarios-card {
    border: 1px solid #d8e4fb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(20, 46, 108, 0.08);
    padding: 0.95rem;
}

.salary-premium-page .salary-summary-table-wrap td,
.salary-premium-page .salary-breakdown-card td,
.salary-premium-page .salary-yearly-card td {
    border-color: #edf3ff;
    padding: 0.58rem 0.45rem;
    font-size: 0.88rem;
}

.salary-premium-page .salary-breakdown-card h2,
.salary-premium-page .salary-yearly-card h2,
.salary-premium-page .salary-scenarios-card h2 {
    color: #122f6e;
}

.salary-premium-page .salary-scenarios-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.salary-premium-page .salary-scenario-card {
    border: 1px dashed #c4d8fa;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    padding: 0.62rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.salary-premium-page .salary-scenario-card:hover {
    border-color: #9ebef6;
    box-shadow: 0 10px 20px rgba(20, 47, 108, 0.1);
}

.salary-premium-page .salary-scenario-card small {
    display: block;
    color: #5f78a3;
}

.salary-premium-page .salary-scenario-card strong {
    display: block;
    margin-top: 0.18rem;
    color: #102448;
}

.salary-premium-page .salary-scenario-card span {
    display: block;
    margin-top: 0.14rem;
    font-size: 0.74rem;
    color: #6a81aa;
}

.salary-premium-page .salary-content-card {
    border: 1px solid #d8e4fb;
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(20, 46, 108, 0.08);
    background: #ffffff;
    padding: 1rem;
}

.salary-premium-page .salary-content-card h2 {
    color: #12306d;
}

.salary-premium-page .salary-ad-wrap .ad-slot,
.salary-premium-page .salary-ad-wrap .ad-demo,
.salary-premium-page .salary-ad-wrap .ad-placeholder {
    border: 1px dashed #cdddf8;
    border-radius: 15px;
    background: linear-gradient(145deg, #fbfdff, #f3f8ff);
    color: #6e83aa;
    padding: 0.95rem;
}

.salary-premium-page .faq-accordion .accordion-item {
    border: 1px solid #d9e5fc;
    border-radius: 12px !important;
    box-shadow: 0 8px 18px rgba(16, 36, 85, 0.05);
}

.salary-premium-page .faq-accordion .accordion-button {
    font-weight: 600;
    color: #173673;
    background: #ffffff;
}

.salary-premium-page .faq-accordion .accordion-button:not(.collapsed) {
    color: #1d48b2;
    background: #eef4ff;
}

.salary-premium-page .result-highlight {
    animation: salaryResultPulse .58s ease;
}

@keyframes salaryResultPulse {
    0% { transform: scale(.985); }
    70% { transform: scale(1.01); }
    100% { transform: scale(1); }
}

@media (max-width: 1199px) {
    .salary-premium-page .calculator-wrap {
        grid-template-columns: minmax(0, 1fr) 350px;
    }
}

@media (max-width: 991px) {
    .salary-premium-page .salary-hero {
        padding: 1.2rem;
    }

    .salary-premium-page .salary-hero-insights {
        width: 100%;
        min-width: 0;
    }

    .salary-premium-page .calculator-wrap {
        grid-template-columns: 1fr;
    }

    .salary-premium-page .salary-result-panel {
        position: static;
    }

    .salary-premium-page .salary-scenarios-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .salary-premium-page .salary-kpi-grid,
    .salary-premium-page .salary-scenarios-grid {
        grid-template-columns: 1fr;
    }

    .salary-premium-page .salary-cta-btn {
        max-width: 100%;
    }
}

/* END Salary Premium Block */