/*
 * INTERKEY DESIGN SYSTEM — vendored subset
 * =============================================================================
 * Source: the `interkey-design-system` skill, assets/interkey.css.
 * DO NOT hand-tune values in this file. If a component looks wrong, it is wrong
 * in the design system and belongs upstream. Page-specific styling goes in
 * page.css (.pg-* classes), never here.
 *
 * WHAT WAS TAKEN
 *   The complete token set (color, type, space, grid, radius, effects), and the
 *   components the static side pages actually render: Button, Badge,
 *   Breadcrumbs, Accordion, Table, Chip, Alert, Highlight, Card, Stat,
 *   ValueCard, SectionHeading, Icon, SquarePattern, scrims, layout helpers.
 *
 * WHAT WAS LEFT OUT
 *   App-shell and stateful components with no place on a static marketing page:
 *   Header, Sidebar, Tabs, BottomNav, Modal, Drawer, Menu, Tooltip, Toast,
 *   Banner, forms, Pagination, SearchField, Spinner, Skeleton, Progress,
 *   EmptyState. Dropping them keeps this file at roughly a quarter of the
 *   upstream weight for every visitor.
 *
 * TWO DELIBERATE DEVIATIONS
 *   1. The upstream @font-face block is omitted. This site already self-hosts
 *      Cairo as woff2 subsets via css/fonts.css; loading the TTFs again would
 *      double the font payload for no visual gain.
 *   2. The upstream `:where(html)` base rule is omitted. This stylesheet is an
 *      addition to a site that already has base.css. Page-level typography is
 *      set on .pg-doc in page.css instead, so this file cannot reach the
 *      homepage even if it were ever linked there.
 *   Everything else is value-for-value upstream, with three-digit hex expanded
 *   to six and duplicate selectors merged to satisfy this repo's stylelint.
 * =============================================================================
 */

:root {
    /* ---- PRIMARY — Navy (Pantone 2756 C) ---- */
    --ik-navy: #2a2a77;
    --ik-navy-rgb: 42, 42, 119;

    /* Navy tints (guideline shows an 80/60/40/20/10 ramp) */
    --ik-navy-80: #545492;
    --ik-navy-60: #7f7fad;
    --ik-navy-40: #aaaac9;
    --ik-navy-20: #d4d5e4;
    --ik-navy-10: #eaeaf1;

    /* Navy shades */
    --ik-navy-deep: #1f1f5c;
    --ik-navy-900: #17173f;

    /* ---- SECONDARY PALETTE ---- */
    --ik-blue: #123edd;
    --ik-blue-rgb: 18, 62, 221;
    /* Darkened from #6f6cef. As a card and diagram-stage surface this carries
       white body text, and at #6f6cef that pairing measured 4.14:1 --
       under the 4.5:1 WCAG AA threshold for normal-size text, on every page
       the violet tone rotation touches. #6866e1 is the same hue six per cent
       darker, measures 4.59:1 against white, and improves rather than harms
       the token's other uses (as a stat value and a timeline marker it sits
       ON white, where darker is also better). */
    --ik-violet: #6866e1;
    --ik-violet-rgb: 111, 108, 239;
    --ik-cyan: #5ccff7;
    --ik-cyan-rgb: 92, 207, 247;
    --ik-gray: #adadad;

    /* Secondary tints — backgrounds and pattern fills */
    --ik-blue-40: #a0b2f1;
    --ik-blue-20: #cfd8f8;
    --ik-violet-40: #c5c4f7;
    --ik-violet-20: #e2e2fb;
    --ik-cyan-40: #bdeafb;
    --ik-cyan-20: #def4fd;

    /* ---- NEUTRALS ---- */
    --ik-white: #ffffff;
    --ik-off-white: #f4f5fb;
    --ik-gray-100: #eef0f6;
    --ik-gray-200: #dcdfe9;
    --ik-gray-300: #c3c7d6;
    --ik-gray-500: #8b8fa3;
    --ik-gray-700: #55596b;
    --ik-ink: #17173f;

    /* ---- SEMANTIC ALIASES — use these in components ---- */
    --ik-bg: var(--ik-white);
    --ik-bg-subtle: var(--ik-off-white);
    --ik-surface: var(--ik-white);
    --ik-surface-dark: var(--ik-navy);
    --ik-surface-darker: var(--ik-navy-deep);
    --ik-text: var(--ik-navy);
    --ik-text-muted: var(--ik-gray-700);
    /* Darkened off --ik-gray-500 (#8b8fa3), which carried the form notes and
       the table column headers at 3.20:1 on white and 2.94:1 on the header
       ground -- both under AA for the small sizes they are set at, and both
       are text a user actually has to read (what happens after you submit;
       what a column means). 5.36:1 on white, 4.93:1 behind table headers.
       --ik-gray-500 itself is left alone, since it is also used for
       non-text purposes, and .ik-dark re-pins this token separately so the
       dark surfaces are unaffected. */
    --ik-text-subtle: #646a80;
    --ik-text-invert: var(--ik-white);
    --ik-text-on-dark: var(--ik-white);
    --ik-text-on-dark-muted: rgba(255, 255, 255, 0.72);
    --ik-primary: var(--ik-navy);
    --ik-primary-contrast: var(--ik-white);
    --ik-accent: var(--ik-blue);
    --ik-accent-cyan: var(--ik-cyan);
    --ik-accent-violet: var(--ik-violet);
    --ik-link: var(--ik-blue);
    --ik-border: var(--ik-navy-20);
    --ik-border-strong: var(--ik-navy-40);
    --ik-border-on-dark: rgba(255, 255, 255, 0.18);
    --ik-focus: var(--ik-cyan);
    --ik-success: #1f9d6b;
    --ik-warning: #e0a83e;
    --ik-danger: #d64550;
    --ik-success-20: #d9efe5;
    --ik-warning-20: #f9eed7;
    --ik-danger-20: #f9dfe1;
    --ik-danger-deep: #b23640;

    /* ---- TYPE — Cairo, unified for Arabic and Latin ---- */
    --ik-font: "Cairo", ui-sans-serif, system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
    --ik-font-ar: "Cairo", "Segoe UI", Tahoma, sans-serif;
    --ik-weight-regular: 400;
    --ik-weight-medium: 500;
    --ik-weight-semibold: 600;
    --ik-weight-bold: 700;
    --ik-weight-extrabold: 800;

    /* Type scale, built on the brand's 3:2 heading-to-body ratio */
    --ik-text-xs: 12px;
    --ik-text-sm: 14px;
    --ik-text-base: 16px;
    --ik-text-md: 18px;
    --ik-text-lg: 22px;
    --ik-text-xl: 28px;
    --ik-text-2xl: 36px;
    --ik-text-3xl: 48px;
    --ik-text-4xl: 64px;
    --ik-text-5xl: 84px;
    --ik-display: 108px;
    --ik-leading-tight: 1.08;
    --ik-leading-snug: 1.25;
    --ik-leading-normal: 1.55;
    --ik-leading-arabic: 1.85;
    --ik-tracking-tight: -0.02em;
    --ik-tracking-normal: 0em;
    --ik-tracking-wide: 0.08em;
    --ik-tracking-wider: 0.16em;
    --ik-display-weight: var(--ik-weight-extrabold);
    --ik-heading-weight: var(--ik-weight-bold);
    --ik-body-weight: var(--ik-weight-regular);
    --ik-label-weight: var(--ik-weight-semibold);

    /* ---- SPACE, GRID, GEOMETRY ---- */
    --ik-space-0: 0;
    --ik-space-1: 4px;
    --ik-space-2: 8px;
    --ik-space-3: 12px;
    --ik-space-4: 16px;
    --ik-space-5: 24px;
    --ik-space-6: 32px;
    --ik-space-7: 48px;
    --ik-space-8: 64px;
    --ik-space-9: 96px;
    --ik-space-10: 128px;
    --ik-gutter: 24px;
    --ik-container: 1200px;
    --ik-container-wide: 1440px;

    /* Square-first identity: radius defaults to nothing. */
    --ik-radius-none: 0;
    --ik-radius-xs: 2px;
    --ik-radius-sm: 4px;
    --ik-radius-md: 8px;
    --ik-radius-pill: 999px;
    --ik-square: 40px;
    --ik-square-lg: 96px;
    --ik-icon-grid: 24px;
    --ik-icon-stroke: 2px;
    --ik-icon-size-sm: 20px;
    --ik-icon-size: 24px;
    --ik-icon-size-lg: 32px;

    /* ---- EFFECTS ---- */
    --ik-shadow-none: none;
    --ik-shadow-sm:
        0 1px 2px rgba(23, 23, 63, 0.06),
        0 1px 3px rgba(23, 23, 63, 0.08);
    --ik-shadow-md:
        0 4px 12px rgba(23, 23, 63, 0.08),
        0 2px 4px rgba(23, 23, 63, 0.06);
    --ik-shadow-lg:
        0 12px 32px rgba(23, 23, 63, 0.12),
        0 4px 8px rgba(23, 23, 63, 0.06);
    --ik-shadow-focus: 0 0 0 3px rgba(var(--ik-cyan-rgb), 0.55);
    --ik-shadow-accent: 0 8px 24px rgba(var(--ik-blue-rgb), 0.28);
    --ik-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ik-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ik-dur-fast: 120ms;
    --ik-dur: 200ms;
    --ik-dur-slow: 360ms;
    --ik-scrim-navy: linear-gradient(180deg, rgba(31, 31, 92, 0.2) 0%, rgba(31, 31, 92, 0.86) 100%);
    --ik-scrim-navy-solid: rgba(42, 42, 119, 0.82);
    --ik-glass: rgba(255, 255, 255, 0.08);
}

/* Dark surfaces: put .ik-dark on any container, never hand-write dark styles. */
.ik-dark {
    --ik-bg: var(--ik-navy-900);
    --ik-bg-subtle: #1b1b4b;
    --ik-surface: var(--ik-navy-deep);
    --ik-text: #ffffff;
    --ik-text-muted: rgba(255, 255, 255, 0.72);
    --ik-text-subtle: rgba(255, 255, 255, 0.5);
    --ik-border: rgba(255, 255, 255, 0.14);
    --ik-border-strong: rgba(255, 255, 255, 0.28);
    --ik-navy-10: rgba(255, 255, 255, 0.08);
    --ik-navy-20: rgba(255, 255, 255, 0.14);

    color-scheme: dark;
}

/* ---------------- Button ---------------- */

.ik-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    font-family: var(--ik-font);
    font-size: 15px;
    font-weight: var(--ik-weight-semibold);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    border: 0;
    border-radius: var(--ik-radius-none);
    cursor: pointer;
    user-select: none;
    transition:
        background var(--ik-dur) var(--ik-ease),
        color var(--ik-dur) var(--ik-ease),
        box-shadow var(--ik-dur) var(--ik-ease),
        transform var(--ik-dur-fast) var(--ik-ease);
}

.ik-btn:active { transform: translateY(1px); }
.ik-btn:focus-visible {
    outline: none;
    box-shadow: var(--ik-shadow-focus);
}

.ik-btn[disabled],
.ik-btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

.ik-btn--sm {
    height: 34px;
    padding: 0 14px;
    font-size: 13px;
    gap: 6px;
}
.ik-btn--lg {
    height: 52px;
    padding: 0 28px;
    font-size: 16px;
}
/* The full-width button is the one place where the shared `white-space:
   nowrap` above works against itself. Every other button sizes to its own
   label, so nowrap simply keeps it on one line. A block button instead takes
   the width it is given, and the labels it carries are whole sentences
   ("Discuss your observability environment"), so on a phone the label ran
   past the button and the last word or two of the primary action was cut
   off. It has a fixed 44/52px height, so the clipped text had nowhere to go.
   Wrapping is the correct behaviour for a button whose width is imposed:
   min-height replaces the fixed height so a two-line label grows the button
   instead of spilling out of it. Scoped to --block, which the design system
   uses only for the lead form's submit control. */
.ik-btn--block {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding-block: 10px;
    white-space: normal;
    line-height: 1.35;
    text-align: center;
}

.ik-btn--lg.ik-btn--block { min-height: 52px; }

.ik-btn--primary {
    background: var(--ik-navy);
    color: #ffffff;
}
.ik-btn--primary:hover { background: var(--ik-navy-deep); }

.ik-btn--accent {
    background: var(--ik-blue);
    color: #ffffff;
}
.ik-btn--accent:hover { background: #0f34bd; }

.ik-btn--cyan {
    background: var(--ik-cyan);
    color: var(--ik-navy);
}
.ik-btn--cyan:hover { background: #43c2ef; }

.ik-btn--outline {
    background: transparent;
    color: var(--ik-navy);
    box-shadow: inset 0 0 0 1.5px var(--ik-navy);
}

.ik-btn--outline:hover { background: var(--ik-navy-10); }

.ik-btn--ghost {
    background: transparent;
    color: var(--ik-navy);
}
.ik-btn--ghost:hover { background: var(--ik-navy-10); }

.ik-btn--invert {
    background: #ffffff;
    color: var(--ik-navy);
}
.ik-btn--invert:hover { background: var(--ik-gray-100); }

.ik-dark .ik-btn--outline {
    color: #ffffff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.65);
}

.ik-dark .ik-btn--outline:hover { background: rgba(255, 255, 255, 0.1); }
.ik-dark .ik-btn--ghost { color: #ffffff; }
.ik-dark .ik-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.ik-dark .ik-btn--primary {
    background: #ffffff;
    color: var(--ik-navy);
}
.ik-dark .ik-btn--primary:hover { background: var(--ik-gray-100); }

/* ---------------- Badge ---------------- */

.ik-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-family: var(--ik-font);
    font-size: 12px;
    font-weight: var(--ik-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.01em;
    border-radius: var(--ik-radius-none);
}

.ik-badge__dot {
    width: 7px;
    height: 7px;
    border-radius: var(--ik-radius-pill);
    background: currentcolor;
}

.ik-badge--navy {
    background: var(--ik-navy-10);
    color: var(--ik-navy);
}
.ik-badge--blue {
    background: var(--ik-blue-20);
    color: var(--ik-blue);
}
.ik-badge--cyan {
    background: var(--ik-cyan-20);
    color: #0b6f96;
}
.ik-badge--violet {
    background: var(--ik-violet-20);
    color: #4b48c4;
}
.ik-badge--gray {
    background: var(--ik-gray-100);
    color: var(--ik-gray-700);
}
.ik-badge--solid {
    background: var(--ik-navy);
    color: #ffffff;
}

.ik-badge--outline {
    background: transparent;
    color: var(--ik-navy);
    box-shadow: inset 0 0 0 1px var(--ik-border-strong);
}

/* ---------------- Breadcrumbs ---------------- */

.ik-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-family: var(--ik-font);
    font-size: 13.5px;
    font-weight: var(--ik-weight-semibold);
    color: var(--ik-text-muted);
}

/* Breadcrumb links were ~22px tall. Padding lifts the tappable box to 44px
   while the crumb row's own height is set by its container, so the trail
   looks identical -- only the target grows. */
.ik-crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    transition: color var(--ik-dur-fast) var(--ik-ease);
}

.ik-crumbs a:hover { color: var(--ik-link); }
.ik-crumbs a:focus-visible {
    outline: none;
    box-shadow: var(--ik-shadow-focus);
}
.ik-crumbs__sep {
    display: inline-flex;
    opacity: 0.5;
}
.ik-crumbs__current { color: var(--ik-text); }

/* ---------------- Accordion ---------------- */

.ik-acc {
    font-family: var(--ik-font);
    border-top: 1px solid var(--ik-border);
}

.ik-acc__item { border-bottom: 1px solid var(--ik-border); }

.ik-acc__btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 4px;
    font-family: var(--ik-font);
    font-size: 15.5px;
    font-weight: var(--ik-weight-semibold);
    color: var(--ik-text);
    text-align: start;
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--ik-dur-fast) var(--ik-ease);
}

.ik-acc__btn:hover { color: var(--ik-blue); }
.ik-acc__btn:focus-visible {
    outline: none;
    box-shadow: inset var(--ik-shadow-focus);
}

.ik-acc__chev {
    flex: 0 0 auto;
    margin-inline-start: auto;
    transition: transform var(--ik-dur) var(--ik-ease);
}

.ik-acc__panel {
    overflow: hidden;
    padding: 0 4px 18px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ik-text-muted);
}

/* ---------------- Table ---------------- */

/* The wrapper scrolls a wide decision table horizontally rather than
   crushing its columns. Two things were missing: any sign that it scrolls,
   and any way to scroll it from the keyboard.

   The cue is four background layers and no JavaScript. The two shadow layers
   are `scroll`, so they stay pinned to the left and right edges of the box.
   The two cover layers are `local`, so they are positioned against the
   TABLE's content and slide with it. At the start of the scroll the left
   cover sits over the left shadow and hides it; scroll right and the cover
   travels away, revealing the shadow. The right pair works the same way in
   reverse. The effect is that an edge gets a shadow only while there is
   content past it -- so the cue appears exactly when scrolling is possible
   and cancels itself on a wide screen where the table already fits, with no
   breakpoint to maintain, and symmetric edges mean RTL needs no override.
   Order matters: covers are declared first so they paint OVER the shadows.
   --ik-table-cover must match whatever paints the wrapper, or the cover
   cannot conceal the shadow. */
.ik-table-wrap {
    --ik-table-cover: var(--ik-surface);

    overflow-x: auto;
    border: 1px solid var(--ik-border);
    background-color: var(--ik-surface);
    background-image:
        linear-gradient(to right, var(--ik-table-cover), rgba(255, 255, 255, 0)),
        linear-gradient(to left, var(--ik-table-cover), rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(42, 42, 119, 0.18), rgba(42, 42, 119, 0)),
        linear-gradient(to left, rgba(42, 42, 119, 0.18), rgba(42, 42, 119, 0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* The region is focusable so it can be scrolled with the arrow keys; give
   that focus the same visible ring every other control uses. */
.ik-table-wrap:focus-visible {
    outline: none;
    box-shadow: var(--ik-shadow-focus);
}

.ik-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ik-font);
    font-size: 14px;
    color: var(--ik-text);
}

.ik-table th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: var(--ik-weight-bold);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-align: start;
    color: var(--ik-text-subtle);
    background: var(--ik-bg-subtle);
    border-bottom: 1px solid var(--ik-border);
    white-space: nowrap;
}

.ik-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--ik-border);
    vertical-align: middle;
}

.ik-table tbody tr:last-child td { border-bottom: 0; }
.ik-table tbody tr { transition: background var(--ik-dur-fast) var(--ik-ease); }
.ik-table--hover tbody tr:hover { background: var(--ik-navy-10); }
.ik-table--zebra tbody tr:nth-child(even) { background: var(--ik-bg-subtle); }

/* ---------------- Chip ---------------- */

.ik-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    box-sizing: border-box;
    font-family: var(--ik-font);
    font-size: 13px;
    font-weight: var(--ik-weight-semibold);
    color: var(--ik-text);
    background: var(--ik-surface);
    box-shadow: inset 0 0 0 1px var(--ik-border-strong);
    border: 0;
    user-select: none;
}

.ik-chip--sm {
    height: 26px;
    padding: 0 9px;
    font-size: 12px;
}
.ik-chip.is-selected {
    background: var(--ik-navy);
    color: #ffffff;
    box-shadow: none;
}
.ik-dark .ik-chip.is-selected {
    background: var(--ik-cyan);
    color: var(--ik-navy);
}

/* ---------------- Alert ---------------- */

.ik-alert {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    box-sizing: border-box;
    font-family: var(--ik-font);
    font-size: 14px;
    line-height: 1.55;
}

.ik-alert__ico {
    flex: 0 0 auto;
    margin-top: 1px;
}

.ik-alert__title {
    margin: 0 0 2px;
    font-size: 14.5px;
    font-weight: var(--ik-weight-bold);
}

.ik-alert__body {
    color: inherit;
    opacity: 0.85;
}
.ik-alert--info {
    background: var(--ik-blue-20);
    color: #0d2a99;
}
.ik-alert--success {
    background: var(--ik-success-20);
    color: #14684a;
}
.ik-alert--warning {
    background: var(--ik-warning-20);
    color: #7a5410;
}
.ik-alert--danger {
    background: var(--ik-danger-20);
    color: #93313a;
}
.ik-alert--neutral {
    background: var(--ik-navy-10);
    color: var(--ik-text);
}

/* ---------------- Highlight — the signature word block ---------------- */

.ik-highlight {
    display: inline-block;
    padding: 0.04em 0.15em;
    line-height: 1;
    background: var(--ik-cyan);
    color: var(--ik-navy);
    border-radius: var(--ik-radius-none);
}

.ik-highlight--cyan {
    background: var(--ik-cyan);
    color: var(--ik-navy);
}
.ik-highlight--blue {
    background: var(--ik-blue);
    color: #ffffff;
}
.ik-highlight--violet {
    background: var(--ik-violet);
    color: #ffffff;
}
.ik-highlight--navy {
    background: var(--ik-navy);
    color: #ffffff;
}
.ik-highlight--white {
    background: #ffffff;
    color: var(--ik-navy);
}

/* ---------------- Card ---------------- */

.ik-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    color: var(--ik-navy);
    border: 1px solid var(--ik-border);
    border-radius: var(--ik-radius-none);
}

.ik-card__img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.ik-card__body { padding: var(--ik-space-5); }
.ik-card--subtle { background: var(--ik-off-white); }
.ik-card--navy {
    background: var(--ik-navy);
    color: #ffffff;
    border: 0;
}
.ik-card--deep {
    background: var(--ik-navy-deep);
    color: #ffffff;
    border: 0;
}
.ik-card--blue {
    background: var(--ik-blue);
    color: #ffffff;
    border: 0;
}
.ik-card--cyan {
    background: var(--ik-cyan);
    color: var(--ik-navy);
    border: 0;
}
.ik-card--violet {
    background: var(--ik-violet);
    color: #ffffff;
    border: 0;
}

.ik-card--interactive {
    cursor: pointer;
    transition:
        transform var(--ik-dur) var(--ik-ease),
        box-shadow var(--ik-dur) var(--ik-ease);
}

.ik-card--interactive:hover {
    transform: translateY(-3px);
    box-shadow: var(--ik-shadow-lg);
}

/* ---------------- Stat ---------------- */

.ik-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: start;
}

.ik-stat--center {
    align-items: center;
    text-align: center;
}

.ik-stat__value {
    font-family: var(--ik-font);
    font-size: 64px;
    font-weight: var(--ik-weight-extrabold);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ik-navy);
}

.ik-stat__label {
    font-size: 15px;
    font-weight: var(--ik-weight-medium);
    opacity: 0.72;
}
.ik-stat--blue .ik-stat__value { color: var(--ik-blue); }
.ik-stat--cyan .ik-stat__value { color: var(--ik-cyan); }
.ik-stat--violet .ik-stat__value { color: var(--ik-violet); }
.ik-stat--white .ik-stat__value { color: #ffffff; }
[dir="rtl"] .ik-stat__value { letter-spacing: 0; }

/* ---------------- ValueCard ---------------- */

.ik-valuecard {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px;
    background: var(--ik-navy);
    color: #ffffff;
    border-radius: var(--ik-radius-none);
}

.ik-valuecard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ik-valuecard__index {
    font-family: var(--ik-font);
    font-size: 40px;
    font-weight: var(--ik-weight-extrabold);
    line-height: 1;
    color: rgba(255, 255, 255, 0.9);
}

.ik-valuecard__title {
    margin-bottom: 6px;
    font-size: 19px;
    font-weight: var(--ik-weight-bold);
}

.ik-valuecard__desc {
    font-size: 14.5px;
    line-height: 1.5;
    opacity: 0.78;
}
.ik-valuecard--deep { background: var(--ik-navy-deep); }
.ik-valuecard--blue { background: var(--ik-blue); }
.ik-valuecard--violet { background: var(--ik-violet); }
.ik-valuecard--cyan {
    background: var(--ik-cyan);
    color: var(--ik-navy);
}
.ik-valuecard--cyan .ik-valuecard__index { color: var(--ik-navy); }
.ik-valuecard--cyan .ik-valuecard__desc { opacity: 0.82; }

/* ---------------- SectionHeading ---------------- */

.ik-secheading {
    text-align: start;
    color: var(--ik-navy);
}
.ik-secheading--center {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}
.ik-secheading--on-dark { color: #ffffff; }

.ik-secheading__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: var(--ik-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ik-cyan);
}

.ik-secheading__eyebrow::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 3px;
    background: var(--ik-cyan);
}

.ik-secheading__title {
    font-family: var(--ik-font);
    font-size: var(--ik-text-2xl);
    font-weight: var(--ik-weight-extrabold);
    line-height: 1.12;
    letter-spacing: -0.01em;
}

.ik-secheading--md .ik-secheading__title { font-size: var(--ik-text-xl); }
.ik-secheading--xl .ik-secheading__title { font-size: var(--ik-text-3xl); }

.ik-secheading__desc {
    margin: 14px 0 0;
    max-width: 620px;
    font-size: 17px;
    font-weight: var(--ik-weight-regular);
    line-height: 1.6;
    color: var(--ik-text-muted);
}

.ik-secheading--on-dark .ik-secheading__desc { color: rgba(255, 255, 255, 0.72); }
.ik-secheading--center .ik-secheading__desc { margin-inline: auto; }
[dir="rtl"] .ik-secheading__title {
    letter-spacing: 0;
    line-height: 1.3;
}

/* ---------------- Icons ---------------- */

/* 24px grid, even 2px stroke, round caps and corners, color from currentcolor. */
.ik-icon {
    flex: 0 0 auto;
    width: var(--ik-icon-size);
    height: var(--ik-icon-size);
    stroke: currentcolor;
    fill: none;
    stroke-width: var(--ik-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ik-icon--sm {
    width: var(--ik-icon-size-sm);
    height: var(--ik-icon-size-sm);
}
.ik-icon--lg {
    width: var(--ik-icon-size-lg);
    height: var(--ik-icon-size-lg);
}

/* ---------------- Square motif & scrims ---------------- */

.ik-pattern {
    display: block;
    pointer-events: none;
}
.ik-scrim {
    position: absolute;
    inset: 0;
    background: var(--ik-scrim-navy);
}
.ik-scrim--solid { background: var(--ik-scrim-navy-solid); }

/* ---------------- Layout helpers ---------------- */

.ik-container {
    max-width: var(--ik-container);
    margin-inline: auto;
    padding-inline: var(--ik-space-6);
}

.ik-grid {
    display: grid;
    gap: var(--ik-gutter);
    grid-template-columns: repeat(6, 1fr);
}

@media (min-width: 900px) {
    .ik-grid { grid-template-columns: repeat(12, 1fr); }
}

.ik-section { padding-block: var(--ik-space-9); }

@media (max-width: 820px) {
    .ik-section { padding-block: var(--ik-space-7); }
}

.ik-rule {
    width: 56px;
    height: 3px;
    background: var(--ik-cyan);
}