/* =============================================================================
 * smartepsilon — main stylesheet
 * -----------------------------------------------------------------------------
 * TABLE OF CONTENTS
 *
 *   1. TOKENS                  — :root custom properties + accent-color
 *   2. FONTS                   — @font-face (top-level)
 *   3. BASE                    — reset + element defaults
 *   4. UTILITIES               — spacing helpers
 *   5. LAYOUT                  — header, footer
 *   6. COMPONENTS              — buttons, title, accordion, tabs, cards, swipers, timeline, sidebar
 *   7. PAGES / SECTIONS        — page-specific blocks
 *   8. RESPONSIVE              — 4 max-width breakpoints (fluid clamps reduce some)
 *   9. OVERRIDES               — Forminator plugin styles (last in source order)
 *  10. ACCESSIBILITY           — prefers-reduced-motion
 *
 * Cascade strategy: source order (no @layer used). Sections appear in the order
 * they should cascade — base → layout → components → pages → responsive → overrides.
 * ============================================================================= */


/* =============================================================================
 * 1 — TOKENS
 * Selectors: :root
 * Notes: design tokens for colors, font, radii, transitions, z-index, layout.
 *        Hardcoded literals throughout the file are mapped to these vars where
 *        the swap is safe; gradients and @font-face values are intentionally
 *        left as literals.
 * ============================================================================= */

:root {
    /* Colors */
    --c-ink: #000000;
    --c-ink-strong: #0F0F25;
    --c-brand: #2B2868;
    --c-brand-lt: #6B62AC;
    --c-accent: #6548FF;
    --c-text: #737373;
    --c-text-2: #6C757D;
    --c-text-3: #121416;
    --c-text-4: #18181B;
    --c-text-5: #333333;
    --c-text-6: #090808;
    --c-text-7: #111111;
    --c-text-8: #191937;
    --c-white: #FFFFFF;
    --c-border: #E5E5E5;
    --c-border-2: #DFDFDF;
    --c-border-3: #D3D3D3;
    --c-border-4: #E4E4E7;
    --c-border-5: #DDDDDD;
    --c-border-6: #9C9C9C;
    --c-bg-muted: #F8F8F8;
    --c-bg-muted-2: #F9F9F9;
    --c-bg-muted-3: #FEFEFE;
    --c-bg-muted-4: #F0F0F0;
    --c-bg-tint: #FCF6FF;
    --c-bg-tint-2: #EBE8FF;
    --c-muted: #9E9E9E;

    /* Font */
    --ff-base: "JUST Sans", sans-serif;

    /* Radii */
    --r-xs: 4px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-pill: 50px;

    /* Transitions */
    --t-base: 0.4s ease-in-out;
    --t-all: color 0.4s ease-in-out, background-color 0.4s ease-in-out, border-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, opacity 0.4s ease-in-out, transform 0.4s ease-in-out;

    /* Z-index */
    --z-header: 99;
    --z-mobile-nav: 100;

    /* Layout */
    --header-sticky-top: 100px;

    /* Form control accent + page-level UA affordances */
    accent-color: var(--c-brand);
    scroll-behavior: smooth;
}


/* =============================================================================
 * 2 — FONTS
 * Selectors: @font-face (JUST Sans 200/300/400/500/600/700/800)
 * Notes: literal url() and font-family values kept as-is (do not tokenize).
 *        @font-face must remain at top level — kept outside any wrapping construct.
 * ============================================================================= */

@font-face {
    font-family: 'JUST Sans';
    src: url('../fonts/JUSTSans-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JUST Sans';
    src: url('../fonts/JUSTSans-ExBd.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JUST Sans';
    src: url('../fonts/JUSTSans-ExLt.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JUST Sans';
    src: url('../fonts/JUSTSans-Lt.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JUST Sans';
    src: url('../fonts/JUSTSans-Md.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JUST Sans';
    src: url('../fonts/JUSTSans-Rg.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JUST Sans';
    src: url('../fonts/JUSTSans-SmBd.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* =============================================================================
 * 3 — BASE
 * Selectors: html, body, *, :before, :after, headings, a, b/strong, p, img
 * Notes: box-sizing reset + element defaults.
 * ============================================================================= */

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

html {
    box-sizing: border-box;
    scrollbar-gutter: stable;
}

html,
body {
    overflow-x: clip;
}

a,
aside,
body,
del,
div,
dl,
footer,
header,
li,
main,
ol,
p,
section,
span,
ul {
    padding: 0;
    margin: 0;
    text-shadow: none;
    outline: 0;
    box-shadow: none;
    text-decoration: none;
    list-style: none;
}

b,
strong {
    font-weight: 700;
}

body {
    font: normal 400 18px/26px var(--ff-base);
    color: var(--c-ink);
    overflow-x: clip;
}

p {
    margin-bottom: 30px;
    text-wrap: pretty;
}

a {
    color: var(--c-ink);
    transition: color 0.4s ease-in-out;
}

a:hover,
a:is(:focus, :focus-visible),
a:active {
    color: var(--c-brand-lt);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    font-family: var(--ff-base);
}

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


/* =============================================================================
 * 4 — UTILITIES
 * Selectors: .mtb-120, .mt-120, .mt-30, .mt-50, .ptb-100
 * Notes: spacing helpers. .header-space lives near header section below.
 * ============================================================================= */

.mtb-120 {
    margin: 120px 0;
}

.mt-120 {
    margin-top: 120px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-50 {
    margin-top: 50px;
}

.ptb-100 {
    padding: 100px 0;
}


/* =============================================================================
 * 5.1 — LAYOUT / Header
 * Selectors: header, header.sticky, .navbar, .navbar-brand, .menu-item,
 *            .ar-btn-wrap, .menu-btn, .header-space
 * Notes: fixed-position sticky header with backdrop blur; underline sweep on
 *        nav links via ::before/::after. Menu item rules use native nesting.
 * ============================================================================= */

header {
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--c-border);
    transition: backdrop-filter 0.4s ease-in-out;
}

header.sticky {
    backdrop-filter: blur(10px);
}

header .navbar,
header .navbar-brand {
    padding: 0;
    margin: 0;
}

header .navbar-brand {
    min-width: 170px;
}

header .navbar-brand img {
    transition: max-width 0.4s ease-in-out;
}

header.sticky .navbar-brand img {
    max-width: 140px;
}


header .menu-item {
    display: flex;
}

header .menu-item:last-child {
    display: none;
}

header .menu-item+.menu-item {
    margin-left: 30px;
}

/* Nested: header menu link + underline pseudo-elements + state collapse via :is() */
header .menu-item a {
    display: inline-block;
    font: 400 14px/18px var(--ff-base);
    color: var(--c-text-7);
    position: relative;

    &::after {
        content: "";
        position: absolute;
        bottom: -4px;
        right: -4px;
        left: -4px;
        height: 2px;
        background-color: var(--c-brand);
        z-index: -1;
        transition: transform 0.4s ease-in-out;
        transform: scaleX(0);
        transform-origin: right;
    }

    &::before {
        content: "";
        position: absolute;
        bottom: -4px;
        right: -4px;
        left: -4px;
        height: 2px;
        background-color: var(--c-brand);
        z-index: -1;
        transition: transform 0.4s ease-in-out;
        transform: scaleX(0);
        transform-origin: left;
    }

    &:is(:hover, :focus, :focus-visible, :active, .active) {
        color: var(--c-brand);
    }
}

header .menu-item.current-menu-item a {
    color: var(--c-brand);
}

/* Collapsed via :is() — equivalent to the 8-selector list with current-menu-item joined */
header .menu-item a:is(:hover, :focus, :focus-visible, :active, .active)::before,
header .menu-item a:is(:hover, :focus, :focus-visible, :active, .active)::after,
header .menu-item.current-menu-item a::before,
header .menu-item.current-menu-item a::after {
    transform: scaleX(1);
}

.ar-btn-wrap {
    min-width: 170px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 18px;
}

.menu-btn {
    font: 400 14px/18px var(--ff-base);
    display: flex;
    align-items: center;
    color: var(--c-text-7);
}

.header-space {
    margin-top: 120px;
}


/* =============================================================================
 * 5.2 — LAYOUT / Footer
 * Selectors: footer, .f-logo, .f-desc, .f-title, .f-links, .f-bottom
 * Notes: dark footer; link underline sweep mirrors header pattern.
 * ============================================================================= */

footer {
    padding: 50px 0;
}

.f-logo {
    margin-bottom: 20px;
}

.f-desc p {
    font: 400 14px/22px var(--ff-base);
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
}

.f-title h6 {
    font: 500 10px/13px var(--ff-base);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 16px;
}

.f-links .menu-item {
    display: flex;
}

.f-links .menu-item+.menu-item {
    margin-top: 13px;
}

/* Nested: footer link + underline pseudo-elements + state collapse via :is() */
.f-links .menu-item a {
    font: 400 14px/18px var(--ff-base);
    color: rgba(255, 255, 255, 0.7);
    display: inline-block;
    position: relative;
    z-index: 0;

    &::before {
        content: "";
        position: absolute;
        bottom: -6px;
        right: -4px;
        left: 0;
        height: 2px;
        background-color: var(--c-white);
        transition: var(--t-all);
        transform: scaleX(0);
        transform-origin: left;
        z-index: -1;
    }

    &::after {
        content: "";
        position: absolute;
        bottom: -6px;
        right: -4px;
        left: 0;
        height: 2px;
        background-color: var(--c-white);
        z-index: -1;
        transition: var(--t-all);
        transform: scaleX(0);
        transform-origin: right;
    }

    &:is(:hover, :focus, :focus-visible, :active, .active)::before,
    &:is(:hover, :focus, :focus-visible, :active, .active)::after {
        transform: scaleX(1);
    }
}


.f-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 30px;
}

.f-bottom p {
    font: 400 13px/17px var(--ff-base);
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0;
}

.f-bottom .right {
    display: flex;
    gap: 20px;
    align-items: center;
}

.f-bottom a,
.f-bottom span {
    font: 400 13px/17px var(--ff-base);
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0;
}

.f-bottom a:hover,
.f-bottom a:is(:focus, :focus-visible),
.f-bottom a:active {
    color: var(--c-white);
}


/* =============================================================================
 * 6 — COMPONENTS
 * Notes: buttons, title, accordion, tabs, cards, swipers, timeline, sidebar.
 * ============================================================================= */

/* -------------------------------------------------------------------------
 * 6.1 — Buttons
 * Selectors: .default-btn, .outline-btn, .secondary-btn, header .default-btn
 * Notes: animated sweep fill via ::before / ::after; many declarations carry
 *        !important — preserved verbatim. Shared sweep rules use :is() to
 *        collapse the 18-selector and 9-selector lists; the per-button rule
 *        uses native nesting for clarity.
 * ------------------------------------------------------------------------- */

header .default-btn {
    padding: 11px 19px;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.14px;
}

/* Shared sweep pseudo-elements for all three button types (parent-level, above the nested blocks) */
:is(.default-btn, .outline-btn, .secondary-btn)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--c-brand);
    z-index: -1;
    transition: transform 0.4s ease-in-out;
    transform: scaleX(0);
    transform-origin: right;
}

:is(.default-btn, .outline-btn, .secondary-btn)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: var(--c-brand);
    z-index: -1;
    transition: transform 0.4s ease-in-out;
    transform: scaleX(0);
    transform-origin: left;
}

/* Collapsed via :is() — replaces the 9-selector text-color hover list */
:is(.default-btn, .outline-btn, .secondary-btn):is(:hover, :focus, :focus-visible, :active) {
    color: var(--c-white);
}

/* Collapsed via :is() — replaces the 18-selector ::before/::after sweep list */
:is(.default-btn, .outline-btn, .secondary-btn):is(:hover, :focus, :focus-visible, :active)::before,
:is(.default-btn, .outline-btn, .secondary-btn):is(:hover, :focus, :focus-visible, :active)::after {
    transform: scaleX(1);
}

/* Nested: .default-btn block — shared sweep already covers ::before/::after/hover above */
.default-btn {
    padding: 14px 20px !important;
    background: var(--c-ink-strong) !important;
    border-radius: 4px !important;
    font: 600 15px/19px var(--ff-base) !important;
    letter-spacing: -0.15px !important;
    color: var(--c-white) !important;
    transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Nested: .secondary-btn block */
.secondary-btn {
    font: 600 15px/19px var(--ff-base);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.15px;
    color: var(--c-ink);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 14px 25px;
    position: relative;
    overflow: hidden;
    z-index: 1;

    & svg path {
        transition: stroke 0.4s ease-in-out;
    }

    &:hover svg path {
        stroke: #FFFFFF;
    }
}

.dark-section .secondary-btn {
    color: var(--c-white);
}

.dark-section .secondary-btn svg path {
    stroke: #FFFFFF;
}

/* Nested: .outline-btn block */
.outline-btn {
    border: 1px solid var(--c-white);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 17px;
    font: 600 13px/17px var(--ff-base);
    letter-spacing: -0.13px;
    color: var(--c-white);
    transition: var(--t-all);
    position: relative;
    overflow: hidden;
    z-index: 1;
}


/* -------------------------------------------------------------------------
 * 6.2 — Section Title
 * Selectors: .title, .title-design, .dark-section .title*
 * Notes: heading + eyebrow pattern; dark-section flips text colors.
 *        Fluid type on .title h2 via clamp() — see Tier-1 spec.
 * ------------------------------------------------------------------------- */

.title.text-center .title-design {
    margin: 0 auto;
    width: fit-content;
}

.title-design h5 {
    font: 500 12px/16px var(--ff-base);
    letter-spacing: 1.32px;
    text-transform: uppercase;
    color: var(--c-brand);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.title-design h5::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background-color: var(--c-brand);
}

.title h2 {
    /* Fluid type: 28px → 52px (Tier-1 spec) */
    font: 600 clamp(1.75rem, 1.1rem + 2.8vw, 3.25rem)/1.2 var(--ff-base);
    letter-spacing: -1.56px;
    color: var(--c-ink-strong);
    margin-bottom: 0;
    text-wrap: balance;
}

.title h2 b,
.title h2 strong {
    color: var(--c-brand-lt);
    font-weight: 600;
}

.title:has(h2 + p) h2 {
    margin-bottom: 30px;
}

.title p {
    /* Fluid type: 15px → 18px (Tier-1 spec, shared paragraph baseline) */
    font: 400 clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem)/1.6 var(--ff-base);
    color: var(--c-text);
    margin-bottom: 0;
}

.title p b,
.title p strong {
    font-weight: 600;
    color: var(--c-ink-strong);
}

.dark-section .title h2,
.dark-section .title-design h5 {
    color: var(--c-white);
}

.dark-section .title p {
    color: rgba(255, 255, 255, 0.65);
}

.dark-section .title-design h5::before {
    background-color: var(--c-white);
}

.title ul li {
    font: 400 17px/22px var(--ff-base);
    color: var(--c-text);
}

.title ul li b,
.title ul li strong {
    color: var(--c-brand);
    font-weight: 600;
}

.title ul li+li {
    margin-top: 20px;
}


/* -------------------------------------------------------------------------
 * 6.3 — Accordion
 * Selectors: .ctbsaccordion .accordion-item / .accordion-button / .accordion-body
 * Notes: bootstrap accordion overrides; default chevron suppressed.
 * ------------------------------------------------------------------------- */

.ctbsaccordion .accordion-item {
    border: none;
    transition: var(--t-all);
}

.ctbsaccordion .accordion-item+.accordion-item {
    border-top: 1px solid var(--c-border);
}

.ctbsaccordion .accordion-button {
    font: 400 17px/22px var(--ff-base);
    display: flex;
    align-items: center;
    color: var(--c-text);
    gap: 15px;
    box-shadow: none !important;
    padding: 16px 0;
    background-color: transparent !important;
    transition: color 0.4s ease-in-out, padding 0.4s ease-in-out;
}

.ctbsaccordion .accordion-button:not(.collapsed) {
    font-weight: 600;
    color: var(--c-brand);
    padding-bottom: 32px;
}

.ctbsaccordion .accordion-button span {
    font: 500 11px/14px var(--ff-base);
    color: var(--c-muted);
    transition: color 0.4s ease-in-out;
}

.ctbsaccordion .accordion-button:not(.collapsed) span {
    color: var(--c-brand);
}

.ctbsaccordion .accordion-button::after {
    display: none;
}

.ctbsaccordion .accordion-body {
    padding: 0 0 18px 28px;
}

.ctbsaccordion .accordion-body p {
    font: 400 15px/24px var(--ff-base);
    color: var(--c-text);
    margin-bottom: 0;
}


/* -------------------------------------------------------------------------
 * 6.4 — Tabs
 * Selectors: .product-tabs, .product-content, .pro-content, .pro-list, .sm-indu-tabs
 * Notes: click tabs with underline active state.
 * ------------------------------------------------------------------------- */

.product-tabs ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 30px;
}

.product-tabs .pro-item {
    font: 500 23px/28px var(--ff-base);
    color: var(--c-text);
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #737373;
    cursor: pointer;
}

.product-tabs .pro-item.active {
    font-weight: 600;
    color: var(--c-brand);
    border-bottom: 2px solid #2B2868;
}

.product-content {
    display: none;
}

.pro-content h3 {
    font: 600 20px/26px var(--ff-base);
    color: var(--c-ink-strong);
    margin-bottom: 10px;
}

.pro-content p {
    /* Fluid type: 15px → 18px (Tier-1 spec, shared paragraph baseline) */
    font: 400 clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem)/1.6 var(--ff-base);
    color: var(--c-text);
    margin-bottom: 0;
}

.pro-list ul {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--c-border);
}

.pro-list li {
    font: 400 17px/22px var(--ff-base);
    color: var(--c-text);
}

.pro-list li b,
.pro-list li strong {
    color: var(--c-brand);
    font-weight: 600;
}

.pro-list li+li {
    margin-top: 20px;
}

.sm-indu-tabs .product-tabs ul {
    grid-template-columns: repeat(3, 1fr);
}

.sm-indu-tabs .title h2 {
    max-width: 90%;
    margin-bottom: 10px;
}

.sm-indu-tabs .title h3 {
    font: 400 18px/29px var(--ff-base);
    color: var(--c-brand);
    margin-bottom: 30px;
}


/* -------------------------------------------------------------------------
 * 6.5 — Cards
 * Selectors: .ind-card, .ind-desc, .ind-d-block, .abcore-box, .abco-icon,
 *            .abco-desc, .pro-list-box, .prstk-box, .nodeadd-box, .conadd-box,
 *            .blog-box, .letblog-box, .benefit-box
 * Notes: lift-on-hover + border/background swap pattern is repeated across cards.
 *        Cards with clean parent-then-hover-then-children patterns use native nesting.
 * ------------------------------------------------------------------------- */

/* Nested: .ind-card — base, hover (color-mix swap), children */
.ind-card {
    overflow: hidden;
    transition: var(--t-all);
    cursor: pointer;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    height: 100%;

    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.12);
        border-color: var(--c-brand);
        background-color: color-mix(in srgb, var(--c-brand) 13%, transparent);
        /* was #2B286821 — derived from --c-brand */
    }
}

.ind-desc {
    padding: 20px;
    transition: var(--t-all);
}

.ind-desc h3 {
    font: 500 18px/23px var(--ff-base);
    letter-spacing: -0.54px;
    color: var(--c-ink-strong);
    margin-bottom: 12px;
}

.ind-desc p {
    font-size: 14px;
    margin-bottom: 16px;
}

.ind-d-block+.ind-d-block {
    margin-top: 12px;
}

.ind-d-block h5 {
    font: 500 14px/22px var(--ff-base);
    color: var(--c-ink-strong);
    margin-bottom: 0;
}

.ind-d-block p {
    font: 400 14px/22px var(--ff-base);
    color: var(--c-text);
    margin-bottom: 0;
}

/* Nested: .abcore-box */
.abcore-box {
    border: 1px solid var(--c-border-3);
    border-radius: 10px;
    padding: 20px;
    transition: var(--t-all);
    height: 100%;

    &:hover {
        border-color: #737373;
        transform: translateY(-10px);
        background: var(--c-bg-muted-3);
    }
}

.abco-icon {
    max-width: 70px;
    min-height: 70px;
    background: var(--c-bg-muted-2);
    border: 1px solid var(--c-border-3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 70px;
}

.abco-desc h3 {
    font: 600 20px/26px var(--ff-base);
    color: var(--c-text-5);
    margin-bottom: 12px;
}

.abco-desc p {
    font: 400 16px/21px var(--ff-base);
    color: var(--c-text);
    margin-bottom: 0;
}

/* Nested: .pro-list-box */
.pro-list-box {
    background: var(--c-bg-muted-3);
    border: 1px solid var(--c-border-2);
    border-radius: 10px;
    padding: 20px;
    transition: var(--t-all);

    &:hover {
        background: var(--c-bg-tint-2);
    }

    & h3 {
        font: 600 20px/26px var(--ff-base);
        color: var(--c-text-5);
        margin-bottom: 12px;
    }

    & p {
        font: 400 16px/24px var(--ff-base);
        color: var(--c-text);
        margin-bottom: 0;
    }
}

.pro-list-box+.pro-list-box {
    margin-top: 20px;
}

.prstk-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Nested: .prstk-box */
.prstk-box {
    padding: 34px;
    background: var(--c-white);
    border: 1px solid var(--c-border-4);
    border-radius: 10px;
    display: flex;
    gap: 17px;
    transition: var(--t-all);

    &:hover {
        border-color: #343434;
        transform: translateY(-5px);
    }

    & h3 {
        font: 600 16px/26px var(--ff-base);
        color: var(--c-text-4);
        margin-bottom: 0;
    }

    & p {
        font: 400 16px/26px var(--ff-base);
        color: var(--c-text-4);
        margin-bottom: 0;
    }
}

/* Nested: .nodeadd-box */
.nodeadd-box {
    background: var(--c-bg-muted-3);
    border: 1px solid var(--c-border-2);
    border-radius: 10px;
    padding: 18px 20px;
    transition: var(--t-all);

    & h3 {
        font: 600 20px/26px var(--ff-base);
        color: var(--c-text-5);
        margin-bottom: 12px;
    }

    & p {
        font: 400 16px/21px var(--ff-base);
        color: var(--c-text);
        margin-bottom: 0;
    }
}

.nodeadd-box+.nodeadd-box {
    margin-top: 20px;
}

.nodeadd-box:hover,
.nodeadd-box.active {
    background: var(--c-bg-tint-2);
}

.nodeadd-box p+p {
    margin-top: 12px;
}

/* Nested: .conadd-box */
.conadd-box {
    padding: 90px 50px;
    transition: var(--t-all);

    &:hover {
        background-color: var(--c-ink-strong);
    }

    & h3 {
        font: 600 23px/30px var(--ff-base);
        color: var(--c-ink-strong);
        margin-bottom: 20px;
        transition: var(--t-all);
    }

    & p {
        font: 400 18px/23px var(--ff-base);
        color: var(--c-text);
        margin-bottom: 40px;
        transition: var(--t-all);
    }
}

.conadd-box+.conadd-box {
    border-left: 1px solid var(--c-border-6);
}

.conadd-box a {
    font: 400 28px/36px var(--ff-base);
    color: var(--c-ink-strong);
    transition: var(--t-all);
}

.conadd-box:hover h3,
.conadd-box:hover a {
    color: #ffffff;
}

.conadd-box:hover p {
    color: #B5B5B5;
}

/* Nested: .blog-box */
.blog-box {
    display: flex;
    flex-direction: column;
    height: 100%;

    & .blog-desc p {
        font: 200 16px/149.69% var(--ff-base);
        color: var(--c-text-2);
        margin-bottom: 10px;
        flex: 1;
    }
}

.blog-img a {
    display: block;
    height: 100%;
    width: 100%;
}

.blog-img img {
    width: 100%;
    object-fit: cover;
}

.blog-desc {
    padding-top: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-desc h3,
.blog-desc h3 a {
    font: 400 23px/40px var(--ff-base);
    color: var(--c-text-3);
    margin-bottom: 10px;
    transition: var(--t-all);
}

.blog-desc h3:hover,
.blog-desc h3 a:hover {
    color: var(--c-accent);
}

.blog-desc>a {
    font: 400 20px/40px var(--ff-base);
    color: var(--c-text-3);
    position: relative;
    display: block;
    width: fit-content;
    padding: 0 10px;
}

.blog-desc>a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--c-text-3);
    transition: var(--t-all);
}

.blog-desc>a:hover {
    color: var(--c-accent);
}

.blog-desc>a:hover::after {
    background-color: var(--c-accent);
}

.letblog-box+.letblog-box {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--c-border-2);
}

.letblog-img {
    opacity: 0;
    transition: var(--t-all);
}

.letblog-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.52);
    transition: var(--t-all);
}

.letblog-box+.letblog-box .letblog-img::after,
.letblog-box+.letblog-box .letblog-desc {
    top: 15px;
}

.letblog-img img {
    width: 100%;
    transition: var(--t-all);
}

.letblog-box:hover .letblog-img {
    opacity: 1;
}

.letblog-desc {
    position: absolute;
    inset: 0;
    top: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.letblog-desc h3 {
    font: 400 18px/24px var(--ff-base);
    color: var(--c-text-3);
    margin-bottom: 0;
    transition: var(--t-all);
}

.letblog-desc p {
    font: 400 16px/22px var(--ff-base);
    color: rgba(18, 20, 22, 0.81);
    margin-bottom: 0;
    transition: var(--t-all);
}

.letblog-box:hover h3 {
    color: var(--c-white);
}

.letblog-box:hover p {
    color: rgba(255, 255, 255, 0.81);
}

/* Nested: .benefit-box */
.benefit-box {
    display: flex;
    align-items: center;
    padding: 21px 16px;
    gap: 12px;
    background: var(--c-bg-muted);
    border-radius: 5px;
    transition: var(--t-all);
    height: 100%;

    &:hover {
        background: var(--c-ink-strong);
    }

    & p {
        font: 400 16px/160% var(--ff-base);
        color: var(--c-ink);
        margin-bottom: 0;
        transition: var(--t-all);
    }

    &:hover p {
        color: var(--c-white);
    }
}

.benefit-box svg path {
    transition: var(--t-all);
}

.benefit-box:hover svg path {
    stroke: #FFFFFF;
}


/* -------------------------------------------------------------------------
 * 6.7 — Swipers
 * Selectors: .smtrust-swiper, .turst-box, .ea-swiper, .ea-pagination, .benefit-swiper
 * Notes: trust grid uses swiper-grid-column; ea-pagination active bullet stretches.
 * ------------------------------------------------------------------------- */

.smtrust-swiper.swiper-grid-column>.swiper-wrapper {
    flex-direction: row;
}

.smtrust-swiper {
    border: 1px solid var(--c-border);
    border-radius: 12px;
}

.turst-box {
    padding: 20px 0;
    text-align: center;
}

.turst-box img {
    max-height: 55px;
    height: 100%;
}

.smtrust-swiper .swiper-slide+.swiper-slide {
    border-left: 1px solid var(--c-border);
}

.smtrust-swiper .swiper-slide:nth-child(5) {
    border-left: 0;
}

.smtrust-swiper .swiper-slide:nth-child(5),
.smtrust-swiper .swiper-slide:nth-child(6),
.smtrust-swiper .swiper-slide:nth-child(7),
.smtrust-swiper .swiper-slide:nth-child(8) {
    border-top: 1px solid var(--c-border);
}

.ea-swiper {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
}

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

.ea-pagination {
    position: static;
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 30px;
}

.ea-pagination .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    background: var(--c-white);
    opacity: 1 !important;
    margin: 0 !important;
    border-radius: 5px !important;
}

.ea-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 100px;
    background: #fff;
}

.benefit-swiper .swiper-slide {
    height: auto !important;
}


/* -------------------------------------------------------------------------
 * 6.8 — Timeline (Approach)
 * Selectors: .ea-timeline, .ea-line, .ea-step, .ea-marker, .ea-dot, .ea-body,
 *            .ea-step-label, .ea-details, .ea-details-inner, .ea-icon, .ea-block,
 *            .ea-visual
 * Notes: vertical stepper with collapse/expand via grid-template-rows.
 * ------------------------------------------------------------------------- */

.ea-timeline {
    position: relative;
    z-index: 0;
}

.ea-line {
    position: absolute;
    left: 16px;
    top: 30px;
    bottom: 30px;
    width: 2px;
    border-right: 3px dashed #fff;
    z-index: -1;
}

.ea-step {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 8px;
    padding-bottom: 28px;
    cursor: pointer;
}

.ea-step:last-child {
    padding-bottom: 0;
}

.ea-marker {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid var(--c-border);
    background: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    transition: 0.3s ease;
    position: relative;
    z-index: 2;
}

.ea-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--c-border);
    transition: 0.3s ease;
}

.ea-step.active .ea-marker {
    border-color: #8b5cf6;
}

.ea-step.active .ea-dot {
    background: #a78bfa;
}

.ea-body {
    margin-top: 18px;
}

.ea-step-label {
    font: 400 12px/17px var(--ff-base);
    color: var(--c-text);
    display: block;
    margin-bottom: 5px;
}

.ea-body h3 {
    font: 600 20px/26px var(--ff-base);
    color: var(--c-white);
    margin-bottom: 0;
}

/* Collapse / expand */
.ea-details {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.45s ease, opacity 0.35s ease, margin 0.35s ease;
    overflow: hidden;
}

.ea-details-inner {
    min-height: 0;
    overflow: hidden;
}

.ea-step.active .ea-details {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 18px;
}

.ea-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.ea-block {
    margin-bottom: 18px;
}

.ea-block:last-child {
    margin-bottom: 0;
}

.ea-block h5 {
    font: 500 18px/28px var(--ff-base);
    color: var(--c-white);
    margin-bottom: 0;
}

.ea-block p {
    font: 400 18px/28px var(--ff-base);
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0;
}


.ea-step:not(.active) .ea-step-label,
.ea-step:not(.active) .ea-body h3 {
    color: rgba(255, 255, 255, 0.55);
}

/* Right side visual */
.ea-visual {
    position: relative;
}


/* -------------------------------------------------------------------------
 * 6.9 — Sidebar / JTOC
 * Selectors: .side-bar, .cside-bar, .sidebr-box, .wpj-jtoc--*
 * Notes: sticky sidebar; cside-bar has hover/active accent indicator bar.
 * ------------------------------------------------------------------------- */

.side-bar,
.cside-bar {
    position: sticky;
    top: 100px;
}

.cside-bar ul li {
    padding: 14px 24px;
    transition: var(--t-all);
    cursor: pointer;
    font: 400 20px/160% var(--ff-base);
    color: var(--c-text-6);
    position: relative;
}

.cside-bar ul li.active,
.cside-bar ul li:hover {
    font-weight: 500;
}

.cside-bar ul li+li {
    margin-top: 1px;
}

.cside-bar ul li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 0;
    background-color: var(--c-accent);
    transition: height 0.4s ease-in-out;
}

.cside-bar ul li.active::before,
.cside-bar ul li:hover::before {
    height: 100%;
}

.sidebr-box .wpj-jtoc--title-label {
    font: 400 25px/33px var(--ff-base);
    color: var(--c-text-3);
    margin-bottom: 0;
}

.sidebr-box .wpj-jtoc {
    margin: 0 !important;
}

.sidebr-box .wpj-jtoc--header {
    height: fit-content !important;
}

.sidebr-box .wpj-jtoc--toc.wpj-jtoc--toc-inline {
    background: var(--c-bg-tint-2);
    border-radius: 10px;
}

.sidebr-box .wpj-jtoc--header-main {
    padding: 10px 15px;
    height: fit-content;
}

.sidebr-box .wpj-jtoc--body {
    padding-top: 0 !important;
}

.sidebr-box .wpj-jtoc--header-main .wpj-jtoc--title {
    margin-left: 0 !important;
}

.sidebr-box .wpj-jtoc--item .wpj-jtoc--item-content,
.sidebr-box .wpj-jtoc--item .wpj-jtoc--item-content span,
.sidebr-box .wpj-jtoc--item .wpj-jtoc--item-content a {
    font: 500 16px/22px var(--ff-base);
    color: var(--c-text);
}

.sidebr-box .wpj-jtoc--item.--jtoc-is-active .wpj-jtoc--item-content,
.sidebr-box .wpj-jtoc--item.--jtoc-is-active .wpj-jtoc--item-content span,
.sidebr-box .wpj-jtoc--item.--jtoc-is-active .wpj-jtoc--item-content a,
.sidebr-box .wpj-jtoc--item:hover .wpj-jtoc--item-content.--jtoc-h2>span,
.sidebr-box .wpj-jtoc--item:hover .wpj-jtoc--item-content.--jtoc-h2>a,
.sidebr-box .wpj-jtoc--item .wpj-jtoc--items .wpj-jtoc--item.--jtoc-h3:hover .wpj-jtoc--item-content.--jtoc-h3>span,
.sidebr-box .wpj-jtoc--item .wpj-jtoc--items .wpj-jtoc--item.--jtoc-h3:hover .wpj-jtoc--item-content.--jtoc-h3>a {
    color: #6548FF !important;
}


/* =============================================================================
 * 7 — PAGES / SECTIONS
 * Notes: page-specific blocks.
 * ============================================================================= */

/* -------------------------------------------------------------------------
 * 7.1 — Home / Hero
 * Selectors: .sm-hm-banner, .hmb-desc, .hmb-be-btn, .hm-banner-img
 * Notes: dark overlay gradient + badge + caption on hero image.
 *        Fluid type on .hmb-desc h1 via clamp() — see Tier-1 spec.
 * ------------------------------------------------------------------------- */

.sm-hm-banner {
    position: relative;
    overflow: hidden;
}

.hmb-desc h1 {
    /* Fluid type: 30px → 60px (Tier-1 spec) */
    font: 600 clamp(1.875rem, 1.1rem + 3.2vw, 3.75rem)/1.3 var(--ff-base);
    color: var(--c-ink-strong);
    margin-bottom: 30px;
    text-wrap: balance;
}

.hmb-desc h1 b,
.hmb-desc h1 strong {
    font-weight: 600;
    color: var(--c-brand-lt);
}

.hmb-desc p {
    /* Fluid type: 15px → 18px (Tier-1 spec, shared paragraph baseline) */
    font: 400 clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem)/1.6 var(--ff-base);
    color: var(--c-text);
    margin-bottom: 0;
}

.hmb-be-btn {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}

.hm-banner-img img {
    width: 100%;
    border-radius: 12px;
}

.hm-banner-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 0;
    border-radius: 12px;
}

.hm-banner-img .badge {
    position: absolute;
    left: 20px;
    top: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-radius: 50px;
    font: 400 12px/16px var(--ff-base);
    color: var(--c-text-7);
    display: flex;
    align-items: center;
    padding: 8px 14px;
    gap: 8px;
}

.hm-banner-img .badge::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    background: var(--c-brand-lt);
    border-radius: 50px;
}

.hm-banner-img .caption {
    position: absolute;
    left: 20px;
    bottom: 20px;
    max-width: 205px;
}

.hm-banner-img .caption p {
    font: 600 20px/25px var(--ff-base);
    color: var(--c-white);
    margin-bottom: 0;
}


/* -------------------------------------------------------------------------
 * 7.2 — Home / About
 * Selectors: .sm-hm-about, .hm-about-img, .smwhy-img, .ctbsimg-box
 * Notes: shared image-fill rules + paragraph divider in title.
 * ------------------------------------------------------------------------- */

.sm-hm-about .title p+p {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--c-border);
}

.hm-about-img img,
.smwhy-img img,
.ctbsimg-box img,
.pro-img img,
.ind-card .img-wrap img {
    width: 100%;
}

.ctbsimg-box {
    display: none;
}


/* -------------------------------------------------------------------------
 * 7.3 — Home / Approach
 * Selectors: .hm-approach
 * Notes: container only — see 6.8 for the .ea-* timeline component.
 * ------------------------------------------------------------------------- */

.hm-approach .title {
    max-width: 93%;
}


/* -------------------------------------------------------------------------
 * 7.5 — Home / CTA
 * Selectors: .sm-cta, .cta-box, .cta-bg, .cta-desc
 * Notes: split CTA with bleeding background panels per column.
 * ------------------------------------------------------------------------- */

.cta-box {
    padding: 50px 80px 50px 0;
    height: 100%;
}

.cta-desc .title h3 {
    font: 400 30px/39px var(--ff-base);
    color: var(--c-text-8);
    margin-bottom: 0;
}

.cta-bg {
    position: absolute;
    inset: 0;
    right: -12px;
    left: -100%;
    background: var(--c-bg-tint);
    z-index: -1;
}

.sm-cta .col-lg-6:nth-child(2) .cta-bg {
    left: -12px;
    right: -100%;
}

.sm-cta .col-lg-6:nth-child(2) .cta-box {
    padding-left: 62px;
    padding-right: 0;
}

.cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sm-cta .col-lg-6:nth-child(1) .title h3,
.sm-cta .col-lg-6:nth-child(1) .title-design h5 {
    color: var(--c-white);
}

.sm-cta .title h3 b,
.sm-cta .title h3 strong {
    font-weight: 600;
}

.sm-cta .col-lg-6:nth-child(1) .title-design h5::before {
    background-color: var(--c-white);
}

.sm-cta .col-lg-6:nth-child(1) .default-btn {
    background: #FFFFFF !important;
    color: #0A0A14 !important;
    transition: var(--t-all) !important;
}

.sm-cta .col-lg-6:nth-child(1) .default-btn svg path {
    stroke: #0A0A14 !important;
    transition: var(--t-all) !important;
}

.sm-cta .col-lg-6:nth-child(1) .default-btn:hover {
    color: #FFFFFF !important;
}

.sm-cta .col-lg-6:nth-child(1) .default-btn:hover svg path {
    stroke: #FFFFFF !important;
}


/* -------------------------------------------------------------------------
 * 7.6 — Inner Banner
 * Selectors: .sm-inner-banner, .inb-desc, .inb-img
 * Notes: shorter hero used on internal pages; .header-space variant adjusts top.
 *        Fluid type on .inb-desc h1 via clamp() — see Tier-1 spec.
 * ------------------------------------------------------------------------- */

.sm-inner-banner {
    padding: 50px 0;
}

.sm-inner-banner.header-space {
    margin-top: 78px;
}

.inb-desc h1 {
    /* Fluid type: 30px → 55px (Tier-1 spec) */
    font: 600 clamp(1.875rem, 1.15rem + 2.8vw, 3.4375rem)/1.25 var(--ff-base);
    color: var(--c-ink-strong);
    margin-bottom: 30px;
    text-wrap: balance;
}

.inb-desc h1 b,
.inb-desc h1 strong {
    font-weight: 600;
    color: var(--c-brand-lt);
}

.inb-desc p {
    /* Fluid type: 15px → 18px (Tier-1 spec, shared paragraph baseline) */
    font: 400 clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem)/1.6 var(--ff-base);
    color: var(--c-text);
    margin-bottom: 0;
}

.inb-desc p b,
.inb-desc p strong {
    color: var(--c-ink-strong);
    font-weight: 400;
}

.inb-img img {
    border-radius: 12px;
}


/* -------------------------------------------------------------------------
 * 7.7 — About / Core + Evolve
 * Selectors: .smab-trust, .evolu-img, .abtr-img
 * Notes: hero-adjacent image blocks; sizing constraints handled in responsive.
 * ------------------------------------------------------------------------- */

.smab-trust .title h2 {
    max-width: 94%;
}

.evolu-img {
    margin-top: 30px;
}

/* -------------------------------------------------------------------------
 * 7.8 — Contact
 * Selectors: .con-add-grid, .conadd-box wiring
 * Notes: 3-column grid panel; .conadd-box visuals live in 6.5.
 * ------------------------------------------------------------------------- */

.con-add-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1440px;
    background-color: var(--c-bg-muted-4);
    border-radius: 10px;
    margin: 0 auto;
    overflow: hidden;
}


/* -------------------------------------------------------------------------
 * 7.9 — Node Map
 * Selectors: .nodemap-img, .nodemap-dot, .nodemap-dot-inner
 * Notes: absolutely-positioned dots over the map image; scaled when .active.
 * ------------------------------------------------------------------------- */

.nodemap-img img {
    width: 100%;
    border-radius: 10px;
}

.nodemap-dot {
    position: absolute;
    top: 230px;
    left: 420px;
    width: 12px;
    height: 12px;
    background: #767676;
    border-radius: 50px;
    transition: var(--t-all);
}

.nodemap-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    background: rgba(15, 15, 37, 0.1);
    border-radius: 50px;
    transition: var(--t-all);
}

.nodemap-dot.active {
    transform: scale(1.3);
    background-color: var(--c-ink-strong);
}

.nodemap-dot.active::after {
    transform: scale(1.4);
}

.nodemap-dot-inner .nodemap-dot:nth-child(2) {
    top: 80px;
    left: 250px;
}


/* -------------------------------------------------------------------------
 * 7.10 — Blog Listing
 * Selectors: .blog-listing, .bdate-wrap, .bdate-left, .bdate
 * Notes: card grid + date/author meta row; visuals for .blog-box are under 6.5.
 * ------------------------------------------------------------------------- */

.blog-listing .row {
    row-gap: 30px;
}

.bdate-wrap {
    display: flex;
    align-items: center;
    gap: 56px;
    margin-bottom: 20px;
}

.bdate-left {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 6px;
    align-items: center;
    position: relative;
}

.bdate-left::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -45px;
    width: 36px;
    height: 1px;
    background-color: rgba(108, 117, 125, 0.4);
}

.bdate-left img {
    max-width: 24px;
    max-height: 24px;
}

.bdate-left h5 {
    font: 400 18px/40px var(--ff-base);
    color: var(--c-text-3);
    margin-bottom: 0;
}

.bdate p {
    font: 400 18px/40px var(--ff-base) !important;
    color: #6C757D !important;
    margin-bottom: 0 !important;
}

.sm-inner-banner .bdate-wrap {
    margin: 30px 0 0;
}


/* -------------------------------------------------------------------------
 * 7.11 — Blog Details
 * Selectors: .blog-details, .blogd-desc, .blog-testi, .letest-blog
 * Notes: long-form article layout with sticky sidebar and pull-quote.
 * ------------------------------------------------------------------------- */

.blogd-desc #wpj-jtoc {
    display: none !important;
}

.blogd-desc h2 {
    font: 400 30px/33px var(--ff-base);
    color: var(--c-brand);
    margin-bottom: 30px;
    text-wrap: balance;
}

.blogd-desc p {
    font: 400 18px/33px var(--ff-base);
    color: var(--c-text-3);
    margin-bottom: 30px;
}

.blogd-desc h3+p {
    margin-bottom: 15px;
}

.blogd-desc h3+p+h2 {
    margin-top: 30px;
}

.blogd-desc h3 {
    font: 600 18px/33px var(--ff-base);
    color: var(--c-brand-lt);
    margin-bottom: 0;
}

.blog-testi {
    margin-top: 100px;
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.blog-testi img {
    margin-top: 24px;
}

.blog-testi p {
    font: 400 28px/36px var(--ff-base);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--c-brand);
    margin-bottom: 0;
}

.blog-details .col-xxl-3,
.career-details .col-lg-3 {
    overflow: visible !important;
}


/* -------------------------------------------------------------------------
 * 7.12 — Careers
 * Selectors: .career-details, .car-list, .car-desc
 * Notes: listing with tag pills and dividers.
 * ------------------------------------------------------------------------- */

.car-list {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--c-border-5);
}

.car-list:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.car-desc h3 {
    font: 600 28px/160% var(--ff-base);
    color: var(--c-text-6);
    margin-bottom: 8px;
}

.car-desc ul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.car-desc ul li {
    font: 500 14px/18px var(--ff-base);
    color: var(--c-text-6);
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid #090808;
}

.car-desc p {
    font: 400 16px/160% var(--ff-base);
    color: var(--c-text);
    margin-bottom: 0;
}


/* =============================================================================
 * 8 — RESPONSIVE
 * Notes: four max-width breakpoints, kept in original order. Inside each
 *        block, sub-banners mirror the section the rules belong to.
 *        Nesting is intentionally NOT used inside @media blocks.
 *        Fluid clamps on .hmb-desc h1, .title h2, .inb-desc h1 removed the
 *        font-size/line-height overrides at 1199px / 991px / 767px.
 * ============================================================================= */

/* Responsive */

@media screen and (max-width: 1399px) {

    /* --- 8.1.7 Pages — About / Core+Evolve --- */
    .smab-trust .title h2 {
        max-width: 100%;
    }

    /* --- 8.1.4 Tabs --- */
    .product-tabs .pro-item {
        font-size: 18px;
        line-height: 24px;
        padding-bottom: 20px;
    }

    /* --- 8.1.9 Pages — Node Map --- */
    .nodemap-dot {
        top: 200px;
        left: 360px;
    }
}

@media screen and (max-width: 1199px) {

    /* --- 8.2.4 Utilities --- */
    .mtb-120 {
        margin: 90px 0;
    }

    .ptb-100 {
        padding: 80px 0;
    }

    .mt-120 {
        margin-top: 90px;
    }

    /* --- 8.2.5 Header --- */
    header .navbar-brand,
    .ar-btn-wrap {
        min-width: 140px;
    }

    header .navbar-brand img {
        max-width: 140px;
    }

    header.sticky .navbar-brand img {
        max-width: 120px;
    }

    header .menu-item+.menu-item {
        margin-left: 20px;
    }

    header .menu-item a {
        font-size: 13px;
        line-height: 17px;

    }

    .ar-btn-wrap {
        margin-left: 20px;
    }

    header .default-btn {
        padding: 8px 10px;
        font-size: 12px;
        line-height: 16px;
        gap: 4px;
    }

    /* --- 8.2.1 Pages — Home / Hero --- */
    /* .hmb-desc h1 font-size/line-height removed — handled by clamp() in base */
    .hmb-desc h1 {
        margin-bottom: 25px;
    }

    /* NOTE: .hmb-desc p / .title p / .pro-content p / .inb-desc p font sizes
       moved to clamp() in their base rules — block removed at 1199px. */

    /* --- 8.2.6 Buttons --- */
    .default-btn,
    .secondary-btn,
    .outline-btn {
        padding: 12px 16px !important;
        font-size: 14px !important;
        line-height: 18px !important;
        gap: 4px !important;
    }

    .secondary-btn {
        padding: 12px 18px;
    }

    /* --- 8.2.1 Pages — Home / Hero (img) --- */
    .hm-banner-img .caption p {
        font-size: 18px;
        line-height: 23px;
    }

    /* --- 8.2.2 Section Title --- */
    /* .title h2 font-size/line-height removed — handled by clamp() in base */
    .title:has(h2 + p) h2 {
        margin-bottom: 25px;
    }

    /* --- 8.2.2 Pages — Home / About + tabs spacing --- */
    .sm-hm-about .title p+p,
    .pro-list ul {
        padding-top: 15px;
        margin-top: 15px;
    }

    .hmb-be-btn {
        margin-top: 25px;
    }

    /* --- 8.2.3 Accordion --- */
    .ctbsaccordion .accordion-button:not(.collapsed) {
        padding-bottom: 20px;
    }

    /* --- 8.2.4 Tabs --- */
    .product-tabs .pro-item {
        font-size: 16px;
        line-height: 22px;
        padding-bottom: 15px;
    }

    .pro-content h3 {
        font-size: 18px;
        line-height: 24px;
    }

    .pro-list li {
        font-size: 16px;
        line-height: 22px;
    }

    .pro-list li+li {
        margin-top: 12px;
    }

    /* --- 8.2.5 Pages — Home / CTA --- */
    .cta-desc .title h3 {
        font-size: 24px;
        line-height: 32px;
    }

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

    .sm-cta .col-lg-6:nth-child(2) .cta-box {
        padding-left: 40px;
    }

    /* --- 8.2.6 Buttons (outline) --- */
    .outline-btn {
        font-size: 12px;
        line-height: 16px;
    }

    /* --- 8.2.7 Footer --- */
    .f-links .menu-item a {
        font-size: 13px;
        line-height: 17px;
    }

    /* --- 8.2.6 Pages — Inner Banner --- */
    .sm-inner-banner.header-space {
        margin-top: 69px;
    }

    /* --- 8.2.5 Cards / .ind-* --- */
    .ind-desc {
        padding: 18px;
    }

    .ind-desc h3 {
        font-size: 16px;
        line-height: 20px;
    }

    /* --- 8.2.6 Pages — Inner Banner --- */
    /* .inb-desc h1 font-size/line-height removed — handled by clamp() in base */
    .inb-desc h1 {
        margin-bottom: 25px;
    }

    /* --- 8.2.5 Cards / .abco-* --- */
    .abco-icon {
        margin-bottom: 50px;
    }

    .abco-desc h3 {
        font-size: 18px;
        line-height: 24px;
    }

    /* --- 8.2.8 Timeline --- */
    .ea-body {
        margin-top: 14px;
    }

    .ea-block p {
        font-size: 16px;
        line-height: 26px;
    }

    /* --- 8.2.4 Tabs / Industries --- */
    .sm-indu-tabs .title h3 {
        font-size: 16px;
        line-height: 27px;
        margin-bottom: 20px;
    }

    /* --- 8.2.5 Cards / .pro-list-box --- */
    .pro-list-box h3 {
        font-size: 18px;
        line-height: 24px;
    }

    /* --- 8.2.5 Cards / .prstk-box --- */
    .prstk-box {
        padding: 25px;
    }

    /* --- 8.2.6 Forms --- */
    .form-container {
        padding: 40px 40px 65px;
    }

    .forminator-input,
    .forminator-textarea {
        padding: 22px 25px !important;
        font-size: 18px !important;
        line-height: 24px !important;
    }

    /* --- 8.2.8 Pages — Contact --- */
    .conadd-box {
        padding: 50px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .conadd-box h3 {
        font-size: 21px;
        line-height: 28px;
        margin-bottom: 20px;
    }

    .conadd-box p {
        font-size: 16px;
        line-height: 21px;
        margin-bottom: 30px;
    }

    .conadd-box a {
        font-size: 18px;
        line-height: 24px;
    }

    /* --- 8.2.5 Cards / .nodeadd-box --- */
    .nodeadd-box h3 {
        font-size: 18px;
        line-height: 24px;
    }

    /* --- 8.2.10 Pages — Blog Listing --- */
    .blog-desc h3,
    .blog-desc h3 a {
        font-size: 20px;
        line-height: 35px;
    }

    .bdate-wrap {
        gap: 46px;
        margin-bottom: 15px;
    }

    .bdate-left h5 {
        font-size: 15px;
        line-height: 35px;
    }

    .bdate-left::after {
        right: -35px;
        width: 26px;
    }

    .bdate p {
        font-size: 14px !important;
        line-height: 35px !important;
    }

    .blog-desc>a {
        font-size: 18px;
        line-height: 35px;
    }

    /* --- 8.2.11 Pages — Blog Details --- */
    .blogd-desc h2 {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    .blogd-desc p {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 20px;
    }

    .blogd-desc h3 {
        font-size: 16px;
        line-height: 26px;
    }

    .blog-testi p {
        font-size: 20px;
        line-height: 30px;
    }

    /* --- 8.2.9 Sidebar / JTOC --- */
    .sidebr-box .wpj-jtoc--title-label {
        font-size: 20px;
        line-height: 28px;
    }

    /* --- 8.2.5 Cards / .letblog-box --- */
    .letblog-desc h3 {
        font-size: 16px;
        line-height: 22px;
    }

    /* --- 8.2.5 Cards / .benefit-box --- */
    .benefit-box {
        padding: 20px 16px;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }

    .benefit-box img {
        max-width: 30px;
        max-height: 30px;
    }

    .benefit-box p {
        font-size: 15px;
    }

    /* --- 8.2.9 Sidebar --- */
    .cside-bar ul li {
        padding: 12px 24px;
        font-size: 18px;
    }

    /* --- 8.2.12 Pages — Careers --- */
    .car-desc h3 {
        font-size: 24px;
    }

    /* --- 8.2.6 Forms --- */
    .forminator-file-upload {
        padding: 15px 15px !important;
    }

    .forminator-button-upload {
        padding: 10px 13px !important;
        font-size: 14px !important;
        line-height: 18px !important;
    }

    /* --- 8.2.9 Pages — Node Map --- */
    .nodemap-dot {
        top: 170px;
        left: 300px;
        width: 10px;
        height: 10px;
    }

    .nodemap-dot::after {
        inset: -2px;
    }
}

@media (max-width: 991px) {

    /* --- 8.3.4 Utilities --- */
    .mtb-120 {
        margin: 70px 0;
    }

    .ptb-100 {
        padding: 60px 0;
    }

    .mt-120 {
        margin-top: 70px;
    }

    .mt-50 {
        margin-top: 30px;
    }

    .row {
        row-gap: 30px;
    }

    /* --- 8.3.5 Header (mobile nav) --- */
    header .navbar-brand img {
        max-width: 130px;
    }

    header .default-btn {
        padding: 10px 12px;
        font-size: 12px;
        line-height: 16px;
        gap: 4px;
    }

    .navbar-toggler {
        width: 30px;
        display: flex;
        flex-direction: column;
        align-items: end;
        justify-content: center;
        gap: 5px;
        padding: 0;
        border: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
        outline: none !important;
        margin-left: auto !important;
    }

    .navbar-toggler .icon-bar {
        display: flex;
        width: 100%;
        height: 3px;
        border-radius: 2px;
        background-color: #2B2868;
    }

    .navbar-toggler .icon-bar:nth-child(2) {
        width: 75%;
    }

    header .navbar-collapse {
        position: fixed;
        top: 0;
        right: -100%;
        bottom: 0;
        min-width: 60%;
        background-color: #FFFFFF;
        display: block !important;
        transition: right 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        padding-top: 80px;
        overflow-y: auto;
        z-index: 100;
        height: 100vh;
        box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.15);
        border-left: 1px solid #E5E5E5;
    }

    header .navbar-collapse.show {
        right: 0;
        border-left: none;
    }

    header .navbar-nav {
        width: 100%;
    }

    header .menu-item {
        width: 100%;
        margin-left: 0 !important;
        border-top: 1px solid #6B62AC;
    }


    header .menu-item a {
        width: 100%;
        font-size: 16px;
        line-height: 16px;
        padding: 17px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: var(--t-all);
    }

    header .menu-item a:hover,
    header .menu-item a:focus,
    header .menu-item a:focus-visible,
    header .menu-item a:active,
    header .menu-item.current-menu-item a {
        background-color: #6B62AC;
        color: #FFFFFF;
    }

    header .menu-item a::before,
    header .menu-item a::after {
        display: none;
    }

    .close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        border: none;
        background-color: transparent;
        padding: 0;
        width: 35px;
        height: 35px;
        background-color: #6B62AC;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
    }

    .header-space {
        margin-top: 100px;
    }

    .ar-btn-wrap {
        margin-left: 15px;
    }

    /* --- 8.3.1 Pages — Home / Hero --- */
    /* .hmb-desc h1 font-size/line-height removed — handled by clamp() in base */
    .hmb-desc h1 {
        margin-bottom: 20px;
    }

    .hm-banner-img,
    .inb-img {
        width: 60%;
        margin: 0 auto;
    }

    .hm-banner-img .badge {
        font-size: 11px;
        line-height: 14px;
        padding: 6px 12px;
        gap: 6px;
    }

    /* --- 8.3.2 Section Title --- */
    /* .title h2 font-size/line-height removed — handled by clamp() in base */
    .title:has(h2 + p) h2 {
        margin-bottom: 20px;
    }

    .hmb-be-btn {
        margin-top: 20px;
    }

    /* --- 8.3.2 Pages — Home / About --- */
    .hm-about-img img,
    .smwhy-img img,
    .ctbsimg-box img,
    .pro-img img {
        width: 60%;
        display: block;
        margin: 0 auto;
    }

    .hm-about-img img {
        width: 60%;
    }

    /* --- 8.3.3 Accordion --- */
    .ctbsaccordion .accordion-button {
        font-size: 16px;
        line-height: 22px;
    }

    /* --- 8.3.4 Tabs --- */
    .product-tabs .pro-item {
        font-size: 18px;
        line-height: 24px;
        padding-bottom: 12px;
    }

    /* --- 8.3.4 Pages — Home / Trust + CTA --- */
    .smgm-trust .title,
    .cta-box .title {
        text-align: center;
    }

    .smgm-trust .title .title-design,
    .cta-box .title .title-design {
        margin: 0 auto 10px;
        width: fit-content;
    }

    /* --- 8.3.7 Swipers / Trust --- */
    .turst-box img {
        max-height: 35px;
        height: 100%;
    }

    /* --- 8.3.5 Pages — Home / CTA --- */
    .sm-cta .row {
        row-gap: 0;
    }

    .cta-bg,
    .sm-cta .col-lg-6:nth-child(2) .cta-bg {
        right: -25%;
        left: -25%;
    }

    .cta-box {
        padding: 40px 0 !important;
    }

    .cta-box .hmb-be-btn {
        justify-content: center;
    }

    /* --- 8.3.6 Footer --- */
    footer {
        padding: 50px 0 25px;
    }

    /* --- 8.3.3 Accordion (last-child fix) --- */
    .ctbsaccordion .accordion-item:last-child .accordion-body {
        padding-bottom: 0;
    }

    /* --- 8.3.4 Tabs --- */
    .product-tabs ul {
        gap: 20px;
    }

    .product-tabs .pro-item {
        font-size: 16px;
        line-height: 22px;
        padding-bottom: 10px;
    }


    /* --- 8.3.6 Pages — Inner Banner --- */
    .sm-inner-banner.header-space {
        margin-top: 67px;
    }

    .sm-inner-banner {
        padding: 35px 0 40px;
    }

    /* .inb-desc h1 font-size/line-height removed — handled by clamp() in base */
    .inb-desc h1 {
        margin-bottom: 20px;
    }

    /* --- 8.3.5 Cards / .abco-* --- */
    .abco-icon {
        margin-bottom: 40px;
        max-width: 60px;
        min-height: 60px;
    }

    .abco-icon img {
        max-width: 35px;
        max-height: 35px;
    }

    /* --- 8.3.7 Pages — About + Approach visuals --- */
    .abtr-img,
    .ea-visual {
        max-width: 60%;
        margin: 0 auto;
    }

    /* --- 8.3.8 Timeline --- */
    .ea-step {
        padding-bottom: 15px;
    }

    .ea-icon {
        display: none;
    }

    /* --- 8.3.7 Pages — column-reverse stacking --- */
    .smab-trust .row,
    .sm-hm-about .row,
    .product-content-main .row {
        flex-direction: column-reverse;
    }

    .sm-pro-tabs .product-content-main .row,
    .sm-indu-tabs .product-content-main .row {
        flex-direction: column;
    }

    /* --- 8.3.4 Tabs / Industries --- */
    .sm-indu-tabs .title h2 {
        max-width: 100%;
    }

    /* --- 8.3.5 Cards / .prstk-* --- */
    .prstk-grid {
        gap: 20px;
    }

    .prstk-box {
        padding: 18px;
    }

    /* --- 8.3.8 Pages — Contact --- */
    .con-add-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .conadd-box+.conadd-box {
        border-left: none;
        border-top: 1px solid #9C9C9C;
    }

    /* --- 8.3.11 Pages — Blog Details (latest grid) --- */
    .letest-blog {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .letblog-box+.letblog-box {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .letblog-box+.letblog-box .letblog-img::after,
    .letblog-box+.letblog-box .letblog-desc {
        top: 0;
    }

    .blog-testi {
        margin-top: 60px;
    }

    /* --- 8.3.9 Sidebar (careers) --- */
    .cside-bar ul {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .cside-bar ul li {
        border: 1px solid #6548FF;
        border-radius: 5px;
        padding: 10px 20px;
        font-size: 16px;
    }

    /* --- 8.3.12 Pages — Careers --- */
    .car-desc h3 {
        font-size: 22px;
    }

    .car-desc ul li {
        padding: 6px 12px;
    }

    .car-list {
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #DDDDDD;
    }

    /* --- 8.3.6 Forms --- */
    .forminator-button-upload {
        min-width: fit-content !important;
        width: fit-content !important;
        margin: 0 10px 0 0 !important;
    }

    /* --- 8.3.9 Pages — Node Map --- */
    .nodemap-dot {
        top: 255px;
        left: 460px;
    }

    /* --- 8.3.11 Pages — Blog Details layout --- */
    .blog-details .row {
        flex-direction: column-reverse;
    }

    .sidebr-box .wpj-jtoc--toc {
        width: 100% !important;
    }
}

@media (max-width: 767px) {

    /* --- 8.4.4 Utilities --- */
    .mtb-120 {
        margin: 50px 0;
    }

    .ptb-100 {
        padding: 50px 0;
    }

    .mt-120 {
        margin-top: 50px;
    }

    /* --- 8.4.5 Header --- */
    .ar-btn-wrap {
        display: none;
    }

    header .navbar-collapse {
        min-width: 100%;
    }

    header .navbar-brand img {
        max-width: 120px;
    }

    header.sticky .navbar-brand img {
        max-width: 100px;
    }

    header .navbar-collapse {
        padding-top: 70px;
    }

    header .menu-item a {
        font-size: 15px;
        line-height: 15px;
        padding: 15px 15px;
    }

    .header-space {
        margin-top: 90px;
    }

    /* --- 8.4.1 Pages — Home / Hero --- */
    /* .hmb-desc h1 font-size/line-height removed — handled by clamp() in base */
    .hmb-desc h1 {
        margin-bottom: 10px;
    }

    /* .abco-desc p is NOT a clamp target — kept; .hmb-desc p / .title p /
       .pro-content p removed from this list (clamp() handles them). */
    .abco-desc p {
        font-size: 15px;
        line-height: 25px;
    }

    .hmb-be-btn {
        flex-wrap: wrap;
    }

    /* --- 8.4.6 Buttons --- */
    .default-btn,
    .secondary-btn,
    .outline-btn {
        font-size: 13px !important;
        line-height: 13px !important;
        gap: 8px !important;
    }

    .sm-hm-banner .default-btn,
    .sm-hm-banner .secondary-btn {
        width: 100%;
        justify-content: center;
    }

    /* --- 8.4.2 Pages — Home / About + image fill --- */
    .hm-banner-img,
    .hm-about-img img,
    .smwhy-img img,
    .ctbsimg-box img,
    .pro-img img,
    .inb-img,
    .abtr-img,
    .ea-visual {
        width: 100%;
        max-width: 100%;
    }

    /* --- 8.4.2 Section Title --- */
    /* .title h2 font-size/line-height removed — handled by clamp() in base */
    .title:has(h2 + p) h2 {
        margin-bottom: 15px;
    }

    /* --- 8.4.3 Accordion --- */
    .ctbsaccordion .accordion-button {
        padding: 10px 0;
    }

    .ctbsaccordion .accordion-button:not(.collapsed) {
        padding-bottom: 16px;
    }

    /* --- 8.4.4 Tabs --- */
    .pro-list li {
        font-size: 15px;
        line-height: 25px;
    }

    /* --- 8.4.5 Pages — Home / CTA --- */
    .cta-desc .title h3 {
        font-size: 20px;
        line-height: 30px;
    }

    /* --- 8.4.6 Footer --- */
    footer {
        padding: 40px 0 25px;
    }

    .f-bottom p {
        width: 100%;
        text-align: center;
    }

    .f-bottom .right {
        width: 100%;
        justify-content: center;
    }

    /* --- 8.4.6 Pages — Inner Banner --- */
    /* .inb-desc h1 font-size/line-height removed — handled by clamp() in base */
    .inb-desc h1 {
        margin-bottom: 15px;
    }

    /* --- 8.4.* Type rescale across components ---
       NOTE: clamp() targets (.hmb-desc p, .title p, .pro-content p, .inb-desc p)
       removed from this list. Non-clamp paragraph targets retained. */
    .ea-block p,
    .pro-list-box p,
    .prstk-box p,
    .conadd-box p,
    .nodeadd-box p,
    .blog-desc p,
    .car-desc p {
        font-size: 15px;
        line-height: 25px;
    }

    .sm-inner-banner.header-space {
        margin-top: 64px;
    }

    .sm-inner-banner {
        padding: 25px 0 40px;
    }

    /* --- 8.4.5 Cards / .abco-* --- */
    .abco-icon {
        margin-bottom: 30px;
        max-width: 55px;
        min-height: 55px;
    }

    .abco-desc h3 {
        font-size: 16px;
        line-height: 22px;
    }

    /* --- 8.4.8 Timeline --- */
    .ea-step {
        padding-bottom: 5px;
    }

    .ea-body h3 {
        font-size: 16px;
        line-height: 22px;
    }

    /* --- 8.4.4 Tabs / Industries + Products --- */
    .sm-indu-tabs .product-tabs ul,
    .sm-pro-tabs .product-tabs ul {
        grid-template-columns: repeat(1, 1fr);
    }

    .sm-indu-tabs .product-tabs .pro-item,
    .sm-pro-tabs .product-tabs .pro-item {
        border: 1px solid #2B2868;
        padding: 10px;
        border-radius: 10px;
    }

    .sm-indu-tabs .product-tabs .pro-item.active,
    .sm-pro-tabs .product-tabs .pro-item.active {
        border-bottom: 2px solid #2B2868;
    }

    .sm-indu-tabs .title h3 {
        font-size: 15px;
        line-height: 25px;
        margin-bottom: 15px;
    }

    /* --- 8.4.5 Cards / .pro-list-box --- */
    .pro-list-box {
        padding: 15px;
    }

    .pro-list-box h3 {
        font-size: 16px;
        line-height: 22px;
        margin-bottom: 6px;
    }

    /* --- 8.4.5 Cards / .prstk-grid --- */
    .prstk-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    /* --- 8.4.6 Forms --- */
    .form-container {
        padding: 20px 20px 30px;
    }

    .forminator-input,
    .forminator-textarea {
        padding: 14px 20px !important;
        font-size: 16px !important;
        line-height: 22px !important;
    }

    /* --- 8.4.8 Pages — Contact --- */
    .conadd-box h3 {
        font-size: 18px;
        line-height: 25px;
        margin-bottom: 15px;
    }

    .conadd-box p {
        margin-bottom: 20px;
    }

    .conadd-box a {
        font-size: 16px;
        line-height: 22px;
    }

    /* --- 8.4.10 Pages — Blog Listing --- */
    .blog-desc h3,
    .blog-desc h3 a {
        margin-bottom: 5px;
    }

    .bdate-wrap {
        margin-bottom: 10px;
    }

    .blog-desc>a {
        font-size: 16px;
        line-height: 30px;
    }

    /* --- 8.4.11 Pages — Blog Details --- */
    .blog-testi img {
        margin-top: 0;
    }

    .blog-testi {
        margin-top: 40px;
        display: flex;
        align-items: flex-start;
        gap: 20px;
        flex-wrap: wrap;
    }

    .blog-testi p {
        font-size: 18px;
        line-height: 27px;
    }

    .letest-blog {
        grid-template-columns: repeat(1, 1fr);
    }

    /* --- 8.4.9 Sidebar --- */
    .cside-bar ul li {
        padding: 6px 10px;
        font-size: 14px;
    }

    /* --- 8.4.12 Pages — Careers --- */
    .car-desc h3 {
        font-size: 20px;
    }

    .car-desc ul {
        margin-bottom: 14px;
        flex-wrap: wrap;
    }

    /* --- 8.4.6 Forms (upload) --- */
    .forminator-file-upload {
        padding: 10px 10px !important;
    }

    .forminator-button-upload {
        padding: 9px 10px !important;
        font-size: 13px !important;
        line-height: 14px !important;
    }

    /* --- 8.4.9 Pages — Node Map --- */
    .nodemap-dot {
        top: 145px;
        left: 260px;
    }
}


/* =============================================================================
 * 9 — OVERRIDES
 * Selectors: .form-container, .forminator-label/-row-last/-ui/-input/-textarea,
 *            .forminator-button-submit, .forminator-file-upload, .forminator-button-upload
 * Notes: plugin overrides. !important markers are KEPT here — this block sits
 *        last in source order; combined with !important, it overrides earlier
 *        rules and (in the WP enqueue order) any plugin CSS that loaded before
 *        this file.
 * ============================================================================= */

.form-container {
    border: 1px solid var(--c-border-2);
    border-radius: 10px;
    padding: 50px 50px 75px;
}

.forminator-label {
    display: none !important;
}

.forminator-row-last,
.forminator-ui {
    margin-bottom: 0 !important;
}

.forminator-input,
.forminator-textarea {
    background: #F8F8F8 !important;
    border: 1px solid #DFDFDF !important;
    border-radius: 10px !important;
    padding: 27px 30px !important;
    width: 100% !important;
    font: 400 20px/26px var(--ff-base) !important;
    color: #737373 !important;
    outline: none !important;
}

.forminator-button-submit {
    min-width: fit-content !important;
    width: fit-content !important;
    outline: none !important;
    border: none !important;
    margin: 0 auto !important;
    box-shadow: none !important;
}

.forminator-file-upload {
    background: #F8F8F8 !important;
    border: 1px solid #DFDFDF !important;
    border-radius: 10px !important;
    padding: 20px 20px !important;
    width: 100% !important;
    font: 400 20px/26px var(--ff-base) !important;
    color: #737373 !important;
    outline: none !important;
}

.forminator-button-upload {
    padding: 11px 15px !important;
    background: #0F0F25 !important;
    border-radius: 4px !important;
    font: 600 15px/18px var(--ff-base) !important;
    letter-spacing: -0.15px !important;
    color: #FFFFFF !important;
    z-index: 1 !important;
    box-shadow: none !important;
}


/* =============================================================================
 * 10 — ACCESSIBILITY
 * Notes: respects user preference for reduced motion.
 * ============================================================================= */

@media (prefers-reduced-motion: reduce) {

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