/* ============================================================
   Finsabat — home page unified design system.
   Colours and tokens taken from the Figma home design
   (file "Fin", frame "Main"): teal-green #24BB8C primary.
   ============================================================ */

:root {
    --brand: #24bb8c;          /* Figma primary teal-green */
    --brand-strong: #1c9c75;   /* hover / pressed */
    --brand-bright: #4ac8ae;   /* Figma light accent */
    --brand-deep: #337b6c;     /* Figma deep teal — dark sections, headings */
    --brand-tint: #f0faf7;     /* Figma light section background */
    --ink: #1f2a26;            /* headings */
    --body: #4b5563;           /* body text */
    --muted: #6b7280;          /* muted text */
    --line: #e4efe9;           /* borders */
    --surface: #ffffff;
    --off: #fbfafa;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(20, 40, 32, .05), 0 10px 28px rgba(20, 40, 32, .08);
    --shadow-hover: 0 6px 14px rgba(20, 40, 32, .08), 0 20px 44px rgba(20, 40, 32, .14);
    --section-space: clamp(3rem, 2rem + 4vw, 6rem);
}

/* ---- Consistent section rhythm + alternating backgrounds ---- */
.banner-wraper,
.courses-section,
.category-wrapper,
.testimonials-section,
.news,
.media-club,
.videos,
.about,
.bottom {
    padding-block: var(--section-space) !important;
    margin-block: 0 !important;
    position: relative;
}

.section-padding {
    padding-top: var(--section-space) !important;
}

/* tinted sections — unify into the Figma light tint */
.testimonials-section,
.videos {
    background-color: var(--brand-tint) !important;
}

/* ---- Section headings ---- */
.banner-wraper h1,
.banner-wraper h2,
.category-wrapper h2,
.testimonials-section h2,
.news h2,
.media-club h2,
.videos h2,
.about h2 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 1.25rem;
}

/* ---- Cards: one radius, one border, one shadow, one hover ---- */
.associate-card,
.club-card,
.course-card,
.category-box,
.news-card,
.testimonial-card,
.video-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.associate-card:hover,
.club-card:hover,
.course-card:hover,
.category-box:hover,
.news-card:hover,
.testimonial-card:hover,
.video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    border-color: var(--brand-bright);
}

/* ---- Buttons ---- */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease,
        border-color .2s ease, box-shadow .2s ease, transform .12s ease;
}

.btn-primary,
.banner-btn.btn-1 {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
}

.btn-primary:hover,
.banner-btn.btn-1:hover {
    background-color: var(--brand-strong) !important;
    border-color: var(--brand-strong) !important;
    box-shadow: 0 6px 16px rgba(36, 187, 140, .3);
}

.btn-clear,
.banner-btn.btn-2 {
    background-color: transparent !important;
    border: 1.5px solid var(--brand) !important;
    color: var(--brand-strong) !important;
}

.btn-clear:hover,
.banner-btn.btn-2:hover {
    background-color: var(--brand-tint) !important;
}

.btn:active {
    transform: translateY(1px);
}

/* ---- Accent elements ---- */
.category-icon,
.section-subtitle,
.text-primary {
    color: var(--brand) !important;
}

a:not(.btn):hover {
    color: var(--brand-strong);
}

/* ---- Accessible focus ---- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- News cards: normalise the excerpt. The description is raw article
       HTML and can carry wild inline formatting (oversized red headings);
       force a clean, consistent preview like the Figma news cards. ---- */
.news .news-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news .news-detail,
.news .news-detail * {
    font-size: .9rem !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: var(--body) !important;
    text-transform: none !important;
    margin: 0 !important;
}

.news .news-detail {
    max-height: 4.8em !important;
    overflow: hidden !important;
}

.news .news-date {
    font-size: .8rem;
    color: var(--muted);
}

/* ============================================================
   SECTION 1 — Hero, matched to the Figma hero (node 0:51).
   ============================================================ */
.banner-wraper {
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 18%, rgba(74, 200, 174, .10), transparent 38%),
        radial-gradient(circle at 8% 82%, rgba(36, 187, 140, .07), transparent 34%),
        var(--surface);
}

/* decorative concentric rings, as in the Figma background */
.banner-wraper::before,
.banner-wraper::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(36, 187, 140, .12);
    pointer-events: none;
    z-index: 0;
}

.banner-wraper::before {
    width: 520px;
    height: 520px;
    left: -210px;
    bottom: -160px;
    box-shadow: 0 0 0 90px rgba(36, 187, 140, .045);
}

.banner-wraper::after {
    width: 360px;
    height: 360px;
    right: -150px;
    top: 40px;
    box-shadow: 0 0 0 70px rgba(36, 187, 140, .04);
}

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

.banner-title {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    margin-bottom: 1.75rem;
}

/* hero checklist items — consistent pill cards */
.banner-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .25rem;
}

.banner-item .icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
}

.banner-item .icon .category-icon {
    color: #fff !important;
    font-size: 15px;
}

.banner-item .text {
    color: var(--ink);
    font-weight: 500;
    /* same size as the nav menu links (.menu-parent-a = 15px) */
    font-size: 15px;
}

.banner-item-link:hover .text {
    color: var(--brand-strong);
}

.banner-item-link:hover .icon {
    background: var(--brand-strong);
}

.banner-btns {
    gap: .75rem;
}

.banner-btn {
    padding: .7rem 1.9rem;
}

/* ============================================================
   SECTION 2 — Thematic collections (Figma node 0:171).
   ============================================================ */
.courses-section {
    background: var(--brand-tint);
    padding-block: var(--section-space) !important;
}

.courses-section .small-title {
    color: var(--brand) !important;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}

.courses-section .title {
    color: var(--ink) !important;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 2.25rem;
}

.courses-section .course-item {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    height: 100%;
    padding: 1.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}

.courses-section .course-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.courses-section .course-item .d-flex {
    align-items: center;
    gap: .85rem;
}

.courses-section .course-img-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    padding: 11px;
    border-radius: 12px;
    background: var(--brand-tint);
}

.courses-section .course-item .flex-col {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--ink);
}

.courses-section .course-detail-link {
    margin-top: auto;
    align-self: flex-start;
    color: var(--brand-strong);
    font-weight: 600;
    text-decoration: none;
}

.courses-section .course-detail-link::after {
    content: " \2192";
}

/* featured card — solid brand, as in the Figma */
.courses-section .course-item.featured {
    background: var(--brand);
    border-color: var(--brand);
}

.courses-section .course-item.featured .flex-col,
.courses-section .course-item.featured div,
.courses-section .course-item.featured .course-detail-link {
    color: #fff !important;
}

.courses-section .course-item.featured .course-img-icon {
    background: rgba(255, 255, 255, .22);
}

/* carousel dots */
.courses-section .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--brand);
    opacity: .35;
    border: 0;
}

.courses-section .carousel-indicators .active {
    opacity: 1;
    width: 26px;
    border-radius: 6px;
}

/* ============================================================
   SECTION 3 — Testimonial (Figma node 0:185).
   ============================================================ */
.testimonials-section .testimonies-title {
    max-height: 60px;
    width: auto;
    display: block;
    margin: 0 auto 1.75rem;
}

.testimonials-section .testimonials {
    max-width: 60rem;
    margin-inline: auto;
}

.testimonials-section .testimony {
    font-size: clamp(1.15rem, .95rem + .9vw, 1.6rem);
    line-height: 1.6;
    font-weight: 500;
    color: var(--ink) !important;
}

.testimonials-section .testifier .name {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
}

.testimonials-section .testifier-title {
    color: var(--muted) !important;
    font-size: .9rem;
}

.testimonials-section .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--brand);
    opacity: .3;
    border: 0;
}

.testimonials-section .carousel-indicators .active {
    opacity: 1;
    width: 26px;
    border-radius: 6px;
}

/* ============================================================
   SECTION 4 — Calculator (Figma node 0:200).
   ============================================================ */
/* Section frame: layered radial brand glows, soft tint base, generous space. */
.calculator-section {
    position: relative;
    background:
        radial-gradient(circle at 8% -10%, rgba(36, 187, 140, .18), transparent 40%),
        radial-gradient(circle at 95% 10%, rgba(74, 200, 174, .15), transparent 40%),
        radial-gradient(circle at 50% 110%, rgba(36, 187, 140, .08), transparent 45%),
        var(--brand-tint, #f0faf7);
    overflow: hidden;
}

html[data-theme="dark"] .calculator-section {
    background:
        radial-gradient(circle at 8% -10%, rgba(36, 187, 140, .22), transparent 40%),
        radial-gradient(circle at 95% 10%, rgba(74, 200, 174, .18), transparent 40%),
        #0a1410;
}

/* Decorative concentric rings behind the card — like the hero rings. */
.calculator-section::before,
.calculator-section::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(36, 187, 140, .14);
    pointer-events: none;
    z-index: 0;
}

.calculator-section::before {
    width: 440px;
    height: 440px;
    left: -200px;
    top: 20%;
    box-shadow: 0 0 0 70px rgba(36, 187, 140, .045);
}

.calculator-section::after {
    width: 320px;
    height: 320px;
    right: -140px;
    bottom: -80px;
    box-shadow: 0 0 0 60px rgba(36, 187, 140, .04);
}

.calculator-section .container.bg-white {
    position: relative;
    z-index: 1;
    background: #fff !important;
    border: 1px solid var(--line);
    border-radius: 24px !important;
    box-shadow: 0 1px 2px rgba(20, 40, 32, .05), 0 30px 60px rgba(20, 40, 32, .12);
    padding: 2.4rem 2.4rem !important;
    overflow: hidden;
}

html[data-theme="dark"] .calculator-section .container.bg-white {
    background: var(--surface) !important;
}

/* Subtle gradient highlight on the card's top edge. */
.calculator-section .container.bg-white::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-bright, #4ac8ae), var(--brand, #24bb8c), var(--brand-strong, #1c9c75));
}

/* Eyebrow pill above the title — only on this section. */
.calculator-section .col-md-5::before {
    content: "💡 " attr(data-eyebrow);
}

.calculator-section .col-md-5 {
    position: relative;
}

.calculator-section .col-md-5 .title {
    color: var(--ink) !important;
    font-weight: 800;
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
    letter-spacing: -.015em;
    margin-bottom: .35rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}

/* Icon tile intentionally removed — title now stands on its own. */

.calculator-section .col-md-5 p {
    color: var(--muted);
    line-height: 1.55;
    font-size: .98rem;
    margin-bottom: 0;
}

/* ============================================================
   Tab pills — bigger, friendlier, with hover lift + active gradient
   ============================================================ */
.calculator-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: flex-end;
}

@media (max-width: 767px) {
    .calculator-buttons {
        justify-content: flex-start;
        margin-top: 1rem;
    }
}

.calculator-buttons .btn {
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--body);
    border-radius: 999px;
    padding: .55rem 1.2rem;
    font-weight: 600;
    font-size: .92rem;
    text-transform: capitalize;
    transition: all .18s ease;
}

html[data-theme="dark"] .calculator-buttons .btn {
    background: #14201a;
    border-color: var(--line);
    color: var(--body);
}

.calculator-buttons .btn:hover {
    border-color: var(--brand);
    color: var(--brand-strong);
    background: var(--brand-tint);
    transform: translateY(-1px);
}

.calculator-buttons .btn-check:checked+.btn {
    background: linear-gradient(135deg, var(--brand-bright, #4ac8ae), var(--brand, #24bb8c));
    border-color: transparent;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(36, 187, 140, .28);
}

/* ============================================================
   Input fields — bigger, calmer, with focus glow
   ============================================================ */
.calculator-section .col-lg-12 {
    margin-top: 1.4rem !important;
    padding-top: 1.4rem;
    border-top: 1px dashed var(--line);
}

input.calculator-btn,
select.calculator-btn {
    background: #fff !important;
    color: var(--ink) !important;
    border: 1.5px solid var(--line) !important;
    border-radius: 12px !important;
    min-width: 200px;
    padding: .7rem .95rem !important;
    font-weight: 500;
    font-size: .96rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

html[data-theme="dark"] input.calculator-btn,
html[data-theme="dark"] select.calculator-btn {
    background: #14201a !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

input.calculator-btn::placeholder {
    color: var(--muted);
    font-weight: 500;
}

input.calculator-btn:hover,
select.calculator-btn:hover {
    border-color: rgba(36, 187, 140, .45) !important;
}

input.calculator-btn:focus,
select.calculator-btn:focus {
    border-color: var(--brand) !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(36, 187, 140, .14) !important;
    background: var(--brand-tint) !important;
}

html[data-theme="dark"] input.calculator-btn:focus,
html[data-theme="dark"] select.calculator-btn:focus {
    background: #102019 !important;
}

/* ============================================================
   Submit button — big gradient with glow + arrow
   ============================================================ */
.calculator-section .submit-btn {
    background: linear-gradient(135deg, var(--brand-bright, #4ac8ae), var(--brand, #24bb8c)) !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 12px !important;
    padding: .85rem 2.2rem !important;
    box-shadow: 0 8px 22px rgba(36, 187, 140, .3);
    transition: transform .12s, box-shadow .2s, background .2s;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.calculator-section .submit-btn::after {
    content: "→";
    font-weight: 800;
    transition: transform .2s;
}

.calculator-section .submit-btn:hover {
    background: linear-gradient(135deg, var(--brand, #24bb8c), var(--brand-strong, #1c9c75)) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(36, 187, 140, .4);
}

.calculator-section .submit-btn:hover::after {
    transform: translateX(4px);
}

/* ============================================================
   "More calculators" CTA — pinned at the bottom of the card
   ============================================================ */
.calculator-section .calc-more {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px dashed var(--line);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.calculator-section .calc-more-text {
    font-size: .92rem;
    color: var(--body);
    margin: 0;
}

.calculator-section .calc-more-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem 1.1rem;
    background: var(--brand-tint);
    color: var(--brand-strong) !important;
    border: 1.5px solid rgba(36, 187, 140, .28);
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .15s;
}

.calculator-section .calc-more-link:hover {
    background: var(--brand);
    color: #fff !important;
    border-color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(36, 187, 140, .28);
}

html[data-theme="dark"] .calculator-section .calc-more-link {
    background: #122119;
}

/* ============================================================
   SECTION 5 — News (Figma node 0:233).
   Note: the oversized text in the lead image is baked into the
   article's uploaded thumbnail (content) — replace it in admin.
   ============================================================ */
.news .header-section {
    align-items: center;
    margin-bottom: 1.75rem;
}

.news .header-section .title {
    color: var(--ink) !important;
    font-weight: 800;
}

/* lead (featured) news */
.news-image.main img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius);
}

.news-image.main {
    margin-bottom: 1rem;
}

/* tag pills */
.news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.news-tag {
    border-radius: 999px;
    padding: .28rem .8rem;
    font-size: .78rem;
    font-weight: 600;
}

/* right-side list items — override the nested Bootstrap grid into a
   clean flex row: fixed thumbnail + flexible text */
.article-listing-items {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.article-listing-items > .news-listing-item {
    display: block;
    text-decoration: none;
}

.article-listing-items .row.news-listing-item {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: .9rem 0;
    border-bottom: 1px solid var(--line);
}

.article-listing-items > .news-listing-item:last-child .row.news-listing-item {
    border-bottom: 0;
}

.article-listing-items .row.news-listing-item>[class*="col-"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto;
    padding: 0;
}

.article-listing-items .row.news-listing-item>[class*="col-"]:first-child {
    flex: 0 0 124px;
}

.article-listing-items .news-image img {
    width: 124px;
    height: 88px;
    object-fit: cover;
    border-radius: 12px;
}

.article-listing-items .news-title {
    font-size: .98rem;
    margin-top: .2rem;
}

.article-listing-items .news-detail {
    max-height: 3.2em !important;
}

/* ============================================================
   SECTION 6 — Media Club (Figma node 0:260).
   ============================================================ */
.media-club h1 {
    color: var(--ink);
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 1.75rem !important;
}

.media-club .my-3.d-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.media-club .club-card {
    flex: 1 1 0;
    min-width: 190px;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.media-club .club-card>a.d-flex {
    align-items: center;
    gap: .85rem;
    width: 100%;
    text-decoration: none;
}

.media-club .club-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--brand-tint);
    max-width: 48px !important;
}

.media-club .club-icon img,
.media-club .club-icon i {
    max-width: 24px;
    max-height: 24px;
}

.media-club .club-text {
    font-weight: 700;
    font-size: .98rem;
    color: var(--ink);
    line-height: 1.3;
}

.media-club .club-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.media-club .club-card.active {
    background: var(--brand);
    border-color: var(--brand);
}

.media-club .club-card.active .club-text {
    color: #fff;
}

.media-club .club-card.active .club-icon {
    background: rgba(255, 255, 255, .22);
}

/* ============================================================
   SECTION 7 — Game zone / Bootcamps (Figma node 0:269).
   ============================================================ */
.videos h1 {
    color: var(--ink) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
    font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem) !important;
    margin-bottom: .5rem !important;
}

.videos h4 {
    color: var(--body) !important;
    font-weight: 400 !important;
    font-size: clamp(1rem, .92rem + .4vw, 1.15rem) !important;
    line-height: 1.6;
    max-width: 46rem;
    margin-inline: auto !important;
}

.videos .owl-carousel .item {
    padding: .6rem;
}

.videos .owl-carousel .item a {
    display: block;
}

.videos .owl-carousel .item img {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.videos .owl-carousel .item:hover img {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* peeking side slides sit slightly back, the centre slide leads */
.videos .owl-carousel .owl-item {
    transition: opacity .3s ease;
}

.videos .owl-carousel .owl-item:not(.active) {
    opacity: .5;
}

.videos .btn-primary {
    padding: .72rem 2.1rem !important;
}

/* ============================================================
   SECTION 8 — About / О проектах (Figma node 0:376).
   ============================================================ */
.about .row {
    align-items: center;
}

.about .title {
    color: var(--brand) !important;
    font-weight: 800;
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.15rem);
    margin-bottom: .5rem;
}

.about h2 {
    color: var(--ink);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.01em;
    font-size: clamp(1.3rem, 1rem + 1vw, 1.95rem);
}

.about .text-orange {
    color: #f2994a !important;
}

.about p {
    color: var(--body);
    line-height: 1.75;
}

.about img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.about .btn-primary {
    padding: .72rem 2rem !important;
}

/* ============================================================
   SECTION 9 — Partner / government portal cards (Figma node 0:386).
   ============================================================ */
.bottom {
    padding-block: var(--section-space);
}

.bottom .associate-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.bottom .associate-item {
    flex: 1 1 0;
    min-width: 210px;
    display: flex;
}

.bottom .associate-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.bottom .associate-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.bottom .associate-card .club-icon {
    flex: 0 0 auto;
    max-width: none;
}

.bottom .associate-card .club-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bottom .associate-card .club-text {
    font-size: .82rem;
    font-weight: 600;
    color: var(--body);
    line-height: 1.35;
}

/* ============================================================
   SECTION 10 — Footer (Figma node 0:387).
   ============================================================ */
.footer-area {
    background: var(--brand-deep);
    color: #fff;
}

.footer-area .newsletter-wrapper {
    background: var(--brand-deep) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer-area a,
.footer-area .item,
.footer-area .bottom-links .item {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-area a:hover,
.footer-area .item:hover {
    color: #fff;
}

.footer-area .bottom-links .item {
    font-weight: 500;
}

.footer-area p,
.footer-area .small,
.footer-area .footer-content {
    color: rgba(255, 255, 255, .8);
}

/* newsletter form */
.newsletter-wrapper .form-control {
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    color: #fff;
    min-width: 260px;
}

.newsletter-wrapper .form-control::placeholder {
    color: rgba(255, 255, 255, .7);
}

.newsletter-wrapper .btn {
    background: #fff !important;
    color: var(--brand-deep) !important;
    font-weight: 600;
    border: 0;
}

.newsletter-wrapper .btn:hover {
    background: var(--brand-tint) !important;
}

/* copyright bar — sits on the same teal, divided by a hairline */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.footer-area .footer-social a,
.footer-bottom a {
    display: inline-grid;
    place-items: center;
}

/* ============================================================
   MODERN POLISH — contemporary finish on type, labels, buttons.
   ============================================================ */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3,
.title,
.banner-title {
    letter-spacing: -.02em;
}

/* eyebrow / small section labels rendered as soft pills */
.small-title,
.courses-section .small-title {
    display: inline-block;
    padding: .4rem .9rem !important;
    background: var(--brand-tint);
    color: var(--brand-strong) !important;
    border-radius: 999px;
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}

/* primary buttons — subtle gradient + soft glow */
.btn-primary,
.banner-btn.btn-1 {
    background-image: linear-gradient(135deg, var(--brand-bright), var(--brand)) !important;
    box-shadow: 0 6px 18px rgba(36, 187, 140, .26);
}

.btn-primary:hover,
.banner-btn.btn-1:hover {
    background-image: linear-gradient(135deg, var(--brand), var(--brand-strong)) !important;
    box-shadow: 0 8px 22px rgba(36, 187, 140, .34);
}

/* section headings — a short brand accent under the title */
.courses-section .title,
.media-club h1,
.news .header-section .title {
    position: relative;
}

/* crisper card surfaces */
.associate-card,
.club-card,
.course-item,
.news-listing-item,
.calculator-section .container.bg-white {
    backdrop-filter: saturate(1.05);
}

/* ============================================================
   RESPONSIVE — mobile fixes. The theme overflowed horizontally on
   phones: oversized headings and fixed min-widths. These keep the
   home page within the viewport at 320-575px.
   ============================================================ */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

.banner-title {
    font-size: clamp(1.55rem, 4.5vw + .6rem, 3.1rem);
    overflow-wrap: break-word;
}

@media (max-width: 575px) {

    h1, h2, h3,
    .title,
    .banner-title {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .banner-title {
        font-size: 1.6rem;
    }

    .courses-section .title,
    .media-club h1,
    .videos h1,
    .news .header-section .title,
    .about .title {
        font-size: 1.5rem !important;
    }

    .testimonials-section .testimony {
        font-size: 1.05rem !important;
    }

    /* fixed min-widths overflow small screens — let everything fit */
    input.calculator-btn,
    select.calculator-btn {
        min-width: 0 !important;
        width: 100% !important;
        margin-right: 0 !important;
    }

    .newsletter-wrapper .form-control {
        min-width: 0 !important;
        width: 100%;
    }

    .newsletter-wrapper form {
        flex-direction: column;
        align-items: stretch !important;
    }

    .media-club .club-card,
    .bottom .associate-item {
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }

    .calculator-buttons {
        justify-content: flex-start;
    }

    .calculator-section .container.bg-white {
        padding: 1.25rem !important;
    }

    .article-listing-items .news-image img {
        width: 92px;
        height: 66px;
    }

    /* tighten section rhythm on phones */
    .banner-wraper,
    .category-wrapper,
    .testimonials-section,
    .news,
    .media-club,
    .videos,
    .about,
    .bottom,
    .courses-section {
        padding-block: 2.5rem !important;
    }
}

/* containment — no section may push the page wider than the viewport */
@media (max-width: 767px) {

    img {
        max-width: 100% !important;
        height: auto;
    }

    .banner-wraper,
    .courses-section,
    .testimonials-section,
    .category-wrapper,
    .news,
    .media-club,
    .videos,
    .about,
    .bottom,
    .footer-area {
        overflow-x: clip;
    }

    .banner-image img,
    .large-img {
        max-width: 100% !important;
        height: auto;
    }

    .footer-area .row,
    .news .row,
    .about .row,
    .calculator-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .newsletter-wrapper form {
        max-width: 100%;
    }

    /* flex children default to min-width:auto and refuse to shrink, so
       their text never wraps and the row grows past the viewport.
       Allowing them to shrink lets the text wrap and the page fit. */
    .d-flex {
        flex-wrap: wrap;
    }

    .d-flex>*,
    .associate-card>*,
    .club-card>*,
    .banner-item>*,
    .footer-content>* {
        min-width: 0;
    }

    .club-text,
    .banner-item .text,
    .footer-content .d-flex {
        min-width: 0;
        overflow-wrap: break-word;
    }
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   MINI CALCULATORS GRID — home page bento
   Live-computing 6-card calculator grid. Each card is self-contained,
   no submit, no modal. Uses platform design tokens (--brand,
   --radius, --shadow, --line). Full versions live on /calculators.
   ============================================================ */

.calculator-section {
    background:
        radial-gradient(circle at 12% -4%, rgba(36, 187, 140, .10), transparent 40%),
        radial-gradient(circle at 88% 110%, rgba(74, 200, 174, .08), transparent 42%),
        var(--brand-tint, #f0faf7);
    padding-block: var(--section-space);
}

html[data-theme="dark"] .calculator-section {
    background: #0c1812;
}

.calculator-section .mini-calc-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}

.mini-calc-eyebrow {
    display: inline-block;
    padding: .35rem .9rem;
    background: rgba(255, 255, 255, .85);
    color: var(--brand-strong);
    border-radius: 999px;
    border: 1px solid rgba(36, 187, 140, .25);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    backdrop-filter: blur(6px);
}

html[data-theme="dark"] .mini-calc-eyebrow {
    background: rgba(15, 26, 21, .85);
}

.mini-calc-h2 {
    font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.85rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0 0 .8rem;
}

.mini-calc-subtitle {
    color: var(--body);
    line-height: 1.6;
    font-size: 1.02rem;
    margin: 0;
    max-width: 560px;
    margin-inline: auto;
}

/* ===== Bento grid ===== */

.mini-calc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 1160px;
    margin: 0 auto;
}

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

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

/* ===== Single mini card ===== */

.mini-calc {
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e4efe9);
    border-radius: var(--radius, 16px);
    padding: 1.5rem 1.4rem 1.25rem;
    display: grid;
    grid-template-rows: auto 1fr auto auto;
    gap: 1rem;
    box-shadow: var(--shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
    overflow: hidden;
}

html[data-theme="dark"] .mini-calc {
    background: #161e1b;
    border-color: #243430;
}

.mini-calc::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-bright));
    opacity: 0;
    transition: opacity .2s ease;
}

.mini-calc:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(36, 187, 140, .35);
}

.mini-calc:hover::before { opacity: 1; }

.mini-calc .mc-card-head {
    display: flex;
    align-items: baseline;
    gap: .65rem;
}

.mc-num {
    font-family: 'Manrope', sans-serif;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--brand);
    padding: .25rem .55rem;
    background: var(--brand-tint, #f0faf7);
    border-radius: 6px;
}

html[data-theme="dark"] .mc-num {
    background: #122119;
    color: var(--brand-bright);
}

.mc-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    letter-spacing: -.01em;
}

.mc-form {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin: 0;
}

.mc-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.mc-label {
    font-size: .72rem;
    color: var(--muted);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.mc-input-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--off, #fbfafa);
    border: 1px solid var(--line, #e4efe9);
    border-radius: var(--radius-sm, 10px);
    padding: .55rem .8rem;
    transition: border-color .15s ease, background .15s ease;
}

.mc-input-row:focus-within {
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(36, 187, 140, .12);
}

html[data-theme="dark"] .mc-input-row {
    background: #101714;
    border-color: #243430;
}

html[data-theme="dark"] .mc-input-row:focus-within {
    background: #0c1310;
}

.mc-input-row input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    appearance: textfield;
    -moz-appearance: textfield;
}

.mc-input-row input::-webkit-outer-spin-button,
.mc-input-row input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

html[data-theme="dark"] .mc-input-row input { color: #e8f4ef; }

.mc-suffix {
    font-size: .78rem;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Result ===== */

.mini-calc .mc-result {
    padding-top: .9rem;
    border-top: 1px dashed var(--line);
}

html[data-theme="dark"] .mini-calc .mc-result {
    border-top-color: #243430;
}

.mc-result-label {
    font-size: .68rem;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .25rem;
}

.mc-result-value {
    font-size: clamp(1.45rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 800;
    color: var(--brand-strong);
    letter-spacing: -.015em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

html[data-theme="dark"] .mc-result-value { color: var(--brand-bright); }

/* Borrower-DTI specific colorisation */
.mini-calc.is-safe   .mc-result-value { color: var(--brand-strong); }
.mini-calc.is-warn   .mc-result-value { color: #d97724; }
.mini-calc.is-danger .mc-result-value { color: #c44545; }
html[data-theme="dark"] .mini-calc.is-safe   .mc-result-value { color: var(--brand-bright); }
html[data-theme="dark"] .mini-calc.is-warn   .mc-result-value { color: #e8a55c; }
html[data-theme="dark"] .mini-calc.is-danger .mc-result-value { color: #e57b7b; }

/* ===== CTA ===== */

.mc-cta {
    font-size: .82rem;
    font-weight: 700;
    color: var(--brand-strong);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    align-self: flex-start;
    transition: gap .15s ease, color .15s ease;
    border-bottom: 1px dotted transparent;
}

.mc-cta:hover {
    color: var(--brand);
    gap: .55rem;
    border-bottom-color: var(--brand);
}

html[data-theme="dark"] .mc-cta { color: var(--brand-bright); }

.mini-calc-all-cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 2.5rem auto 0;
    background: var(--ink);
    color: #fff;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: gap .15s ease, transform .15s ease, box-shadow .2s ease;
    width: fit-content;
    margin-inline: auto;
    text-align: center;
    margin-top: 2.5rem;
}

.mini-calc-grid + .mini-calc-all-cta { display: flex; }

.mini-calc-all-cta:hover {
    background: var(--brand-strong);
    color: #fff;
    gap: .9rem;
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

@media (max-width: 480px) {
    .calculator-section { padding-block: 3rem; }
    .mini-calc { padding: 1.25rem 1.15rem 1rem; }
    .mc-title { font-size: 1.1rem; }
    .mc-result-value { font-size: 1.4rem; }
}

/* ============================================================
   HOME CALCULATORS — horizontal tab layout
   One calculator visible at a time. Tabs on top filter the view.
   ============================================================ */

.home-calc-section {
    background:
        radial-gradient(circle at 12% -4%, rgba(36, 187, 140, .10), transparent 40%),
        radial-gradient(circle at 88% 110%, rgba(74, 200, 174, .08), transparent 42%),
        var(--brand-tint, #f0faf7);
    padding-block: var(--section-space);
}

html[data-theme="dark"] .home-calc-section { background: #0c1812; }

.home-calc-section .hc-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}

.hc-eyebrow {
    display: inline-block;
    padding: .35rem .9rem;
    background: rgba(255, 255, 255, .85);
    color: var(--brand-strong);
    border-radius: 999px;
    border: 1px solid rgba(36, 187, 140, .25);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    backdrop-filter: blur(6px);
}

html[data-theme="dark"] .hc-eyebrow {
    background: rgba(15, 26, 21, .85);
}

.hc-title {
    font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.85rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin: 0 0 .8rem;
}

.hc-subtitle {
    color: var(--body);
    line-height: 1.6;
    font-size: 1.02rem;
    margin: 0 auto;
    max-width: 560px;
}

/* ===== Tab buttons (filter row) ===== */
.hc-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    max-width: 1160px;
    margin: 0 auto 2rem;
    padding: 0;
}

.hc-tab {
    background: var(--surface, #fff);
    border: 1.5px solid var(--line, #e4efe9);
    border-radius: 999px;
    padding: .65rem 1.3rem;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    transition: all .18s ease;
    box-shadow: 0 1px 2px rgba(20, 40, 32, .04);
}

.hc-tab:hover {
    border-color: var(--brand-bright);
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(36, 187, 140, .14);
}

.hc-tab.is-active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 6px 16px rgba(36, 187, 140, .3);
}

html[data-theme="dark"] .hc-tab {
    background: #161e1b;
    border-color: #243430;
    color: var(--ink);
}

html[data-theme="dark"] .hc-tab.is-active {
    background: var(--brand);
    color: #fff;
}

.hc-tab-num {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--muted);
    padding: .15rem .45rem;
    background: var(--brand-tint);
    border-radius: 4px;
}

.hc-tab.is-active .hc-tab-num {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.hc-tab-name {
    font-weight: 700;
    font-size: .95rem;
}

/* ===== Single full-width calculator card ===== */
.hc-card {
    display: none;
    max-width: 1160px;
    margin: 0 auto;
    background: var(--surface, #fff);
    border: 1px solid var(--line);
    border-radius: var(--radius, 16px);
    box-shadow: var(--shadow);
    padding: 2rem 2.25rem;
    position: relative;
    overflow: hidden;
}

.hc-card.is-active { display: block; }

.hc-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-bright));
}

html[data-theme="dark"] .hc-card {
    background: #161e1b;
    border-color: #243430;
}

/* ===== Horizontal grid: 3 fields side-by-side + result on the right ===== */
.hc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
    gap: 1.5rem 2rem;
    align-items: end;
    margin: 0;
}

.hc-grid-2 {
    /* Borrower: 2 fields + result */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
}

@media (max-width: 991px) {
    .hc-grid,
    .hc-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
    .hc-result { grid-column: 1 / -1; }
}

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

/* ===== Field + input ===== */
.hc-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.hc-field label {
    font-size: .72rem;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hc-input {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--off, #fbfafa);
    border: 1.5px solid var(--line, #e4efe9);
    border-radius: var(--radius-sm, 10px);
    padding: .7rem 1rem;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.hc-input:focus-within {
    border-color: var(--brand);
    background: #fff;
    box-shadow: var(--ring, 0 0 0 3px rgba(36, 187, 140, .14));
}

html[data-theme="dark"] .hc-input {
    background: #101714;
    border-color: #243430;
}

html[data-theme="dark"] .hc-input:focus-within {
    background: #0c1310;
}

.hc-input input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    appearance: textfield;
    -moz-appearance: textfield;
}

.hc-input input::-webkit-outer-spin-button,
.hc-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

html[data-theme="dark"] .hc-input input { color: #e8f4ef; }

.hc-suffix {
    font-size: .78rem;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}

/* ===== Result panel ===== */
.hc-result {
    background: var(--brand-tint);
    border: 1.5px solid rgba(36, 187, 140, .25);
    border-radius: var(--radius-sm, 10px);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    justify-content: center;
    min-height: 100%;
}

html[data-theme="dark"] .hc-result {
    background: rgba(36, 187, 140, .08);
    border-color: rgba(36, 187, 140, .25);
}

.hc-result-label {
    font-size: .7rem;
    color: var(--muted);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hc-result-value {
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.95rem);
    font-weight: 800;
    color: var(--brand-strong);
    letter-spacing: -.015em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

html[data-theme="dark"] .hc-result-value { color: var(--brand-bright); }

/* Borrower DTI colour map */
.hc-card.is-safe   .hc-result-value { color: var(--brand-strong); }
.hc-card.is-warn   .hc-result-value { color: #d97724; }
.hc-card.is-danger .hc-result-value { color: #c44545; }
html[data-theme="dark"] .hc-card.is-safe   .hc-result-value { color: var(--brand-bright); }
html[data-theme="dark"] .hc-card.is-warn   .hc-result-value { color: #e8a55c; }
html[data-theme="dark"] .hc-card.is-danger .hc-result-value { color: #e57b7b; }

.hc-cta {
    margin-top: .4rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--brand-strong);
    text-decoration: none;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: gap .15s ease, color .15s ease;
}

.hc-cta:hover {
    color: var(--brand);
    gap: .55rem;
}

html[data-theme="dark"] .hc-cta { color: var(--brand-bright); }

/* ===== Footer all-cta pill ===== */
.hc-all-cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 2.5rem auto 0;
    /* Brand gradient (matches the unified primary buttons). Was var(--ink),
       which inverts to a light colour in dark theme -> the button rendered
       white with white text and only turned green on hover. */
    background: linear-gradient(135deg, var(--brand-bright), var(--brand));
    color: #fff;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(36, 187, 140, .22);
    transition: all .15s ease;
    width: fit-content;
}

.hc-all-cta:hover {
    background: linear-gradient(135deg, var(--brand), var(--brand-strong));
    color: #fff;
    gap: .9rem;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(36, 187, 140, .32);
}

.home-calc-section { display: block; }
.home-calc-section .hc-card + .hc-all-cta,
.home-calc-section .hc-tabs ~ .hc-all-cta {
    display: flex;
    margin-inline: auto;
    margin-top: 2.5rem;
}

@media (max-width: 480px) {
    .hc-card { padding: 1.25rem 1rem; }
    .hc-tab { padding: .5rem 1rem; font-size: .85rem; }
    .hc-tab-name { font-size: .85rem; }
}

/* External tab (pension → sf.kg, tax → calculator.salyk.kg). Same pill
   shape as internal tabs; never an "active" state, always opens new tab. */
.hc-tab.hc-tab-ext {
    text-decoration: none;
    color: var(--ink);
    background: var(--surface, #fff);
    border-style: dashed;
}

.hc-tab.hc-tab-ext .hc-tab-num {
    background: rgba(36, 187, 140, .12);
    color: var(--brand-strong);
}

.hc-tab.hc-tab-ext:hover {
    border-style: solid;
    border-color: var(--brand);
    color: var(--brand-deep);
}

.hc-tab.hc-tab-ext:hover .hc-tab-num {
    background: var(--brand);
    color: #fff;
}

.hc-ext-icon {
    color: var(--brand-strong);
    flex-shrink: 0;
    margin-left: .15rem;
    transition: transform .15s ease;
}

.hc-tab.hc-tab-ext:hover .hc-ext-icon {
    transform: translate(2px, -2px);
    color: var(--brand);
}