/* ==========================================================================
   Techlivia — design tokens and site styles

   One stylesheet for the whole site. It is served from /assets/css/site.css on
   every page, so a change here is a change everywhere; there is no build step
   and nothing to compile.

   The palette is a deep navy for the hero and footer, a blue family for
   anything interactive, and cyan as the single accent. Every text colour used
   on its intended surface clears 4.5:1 — the navy surfaces take the light ink
   variables, the white ones take --ink and --brand-deep.
   ========================================================================== */

:root {
    /* Brand — blue. --brand carries white text; --brand-deep is the variant used
       for text and icons on a light surface. */
    --brand: #2563EB;
    --brand-strong: #1D4ED8;
    --brand-deep: #14357F;
    --brand-soft: #E8F0FE;
    --brand-tint: #F4F8FF;

    /* Accent — cyan. Used sparingly: rules, glows, the dot on a live badge. */
    --accent: #06B6D4;
    --accent-bright: #22D3EE;

    /* Navy — the hero, the footer, and any inverted section. */
    --navy: #0A1B3D;
    --navy-soft: #102A5C;
    --navy-line: rgba(255, 255, 255, 0.12);

    /* Ink, for text on light surfaces. */
    --ink: #101828;
    --ink-soft: #4A5568;
    /* Darkened from a lighter grey so that it still clears 4.5:1 on the sunken
       surface, not only on white — it is used on both. */
    --ink-faint: #5C6A7E;

    /* Ink, for text on the navy surfaces. */
    --ink-invert: #FFFFFF;
    --ink-invert-soft: #C3D0E8;
    --ink-invert-faint: #93A4C4;

    /* Surfaces */
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --surface-sunken: #F6F8FC;
    --border: #E2E8F2;
    --border-strong: #C8D4E6;

    /* Status colours for the product badges. */
    --live: #0E7C54;
    --live-soft: #E3F5EC;
    --soon: #8A5A00;
    --soon-soft: #FDF2DC;

    --shadow-sm: 0 1px 2px rgba(16, 27, 61, 0.06), 0 2px 6px rgba(16, 27, 61, 0.05);
    --shadow: 0 2px 4px rgba(16, 27, 61, 0.05), 0 12px 28px rgba(16, 27, 61, 0.09);
    --shadow-lg: 0 4px 8px rgba(16, 27, 61, 0.06), 0 24px 56px rgba(16, 27, 61, 0.14);

    /* Layout */
    --radius: 16px;
    --radius-sm: 10px;
    --radius-pill: 999px;
    --page: 1140px;
    --gutter: clamp(20px, 5vw, 40px);
    --tap-target: 44px;

    /* A system stack rather than a web font: nothing to download, nothing
       third-party to ask the visitor's browser for, and no flash of unstyled
       text on the first paint. */
    --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    color-scheme: light;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
    margin: 0 0 0.5em;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: inherit;
}

h1 {
    font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem);
    letter-spacing: -0.03em;
}

h2 {
    font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.4rem);
}

h3 {
    font-size: 1.2rem;
}

p {
    margin: 0 0 1.1em;
}

a {
    color: var(--brand-deep);
    text-decoration-color: rgba(37, 99, 235, 0.35);
    text-underline-offset: 3px;
}

a:hover {
    text-decoration-color: currentColor;
}

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

ul {
    padding-inline-start: 1.2em;
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Text for a screen reader only — used where an icon or the surrounding layout
   already carries the meaning for a sighted reader. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 100;
    padding: 12px 20px;
    background: var(--navy);
    color: #fff;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: clamp(56px, 8vw, 104px);
}

.section--sunken {
    background: var(--surface-sunken);
    border-block: 1px solid var(--border);
}

.section__head {
    max-width: 660px;
    margin-bottom: clamp(32px, 5vw, 52px);
}

.section__head--center {
    margin-inline: auto;
    text-align: center;
}

.section__head p {
    color: var(--ink-soft);
    font-size: 1.08rem;
    margin-bottom: 0;
}

.eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand);
}

.eyebrow--invert {
    color: var(--accent-bright);
}

.lede {
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    color: var(--ink-soft);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: var(--tap-target);
    padding: 12px 26px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease,
        border-color 0.15s ease, color 0.15s ease;
}

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

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

.btn--primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}

.btn--primary:hover {
    background: var(--brand-strong);
    border-color: var(--brand-strong);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.34);
}

.btn--ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--ink);
}

.btn--ghost:hover {
    border-color: var(--brand);
    color: var(--brand-deep);
    background: var(--brand-tint);
}

.btn--on-navy {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.btn--on-navy:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn--disabled,
.btn[aria-disabled="true"] {
    background: var(--surface-sunken);
    border-color: var(--border);
    color: var(--ink-faint);
    box-shadow: none;
    cursor: not-allowed;
}

.btn--disabled:hover,
.btn[aria-disabled="true"]:hover {
    transform: none;
    background: var(--surface-sunken);
    border-color: var(--border);
    color: var(--ink-faint);
}

.btn__icon {
    flex: none;
    width: 1em;
    height: 1em;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.btn-row--center {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Header and navigation
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 68px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-inline-end: auto;
    font-weight: 700;
    font-size: 1.16rem;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
}

.brand__mark {
    width: 30px;
    height: 30px;
    flex: none;
}

.brand:hover {
    color: var(--brand-deep);
}

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap-target);
    padding: 8px 14px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    font: inherit;
    font-size: 0.97rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.nav__link:hover {
    color: var(--ink);
    background: var(--surface-sunken);
}

.nav__link[aria-current="page"],
.nav__link.is-section {
    color: var(--brand-deep);
    font-weight: 600;
}

.nav__caret {
    width: 10px;
    height: 10px;
    flex: none;
    transition: transform 0.18s ease;
}

.nav__link[aria-expanded="true"] .nav__caret {
    transform: rotate(180deg);
}

.nav__cta {
    margin-inline-start: 8px;
    padding: 10px 20px;
    min-height: 40px;
    font-size: 0.95rem;
}

/* The products dropdown.
   It is a <button> that toggles a panel, not a hover-only menu: hover menus are
   unreachable by keyboard and hostile on touch. site.js opens it on click,
   closes it on Escape, on outside click and on focus leaving, and moves focus
   through the items with the arrow keys. Without JavaScript the button still
   links nowhere, so the "All products" link in the panel is duplicated by the
   /products page reachable from the footer and from the panel itself. */
.nav__item {
    position: relative;
}

.menu {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-start: 0;
    z-index: 60;
    width: min(360px, calc(100vw - 32px));
    padding: 10px;
    margin: 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.menu.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.menu__link {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 2px 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink);
}

.menu__link:hover,
.menu__link:focus-visible {
    background: var(--brand-tint);
}

.menu__icon {
    grid-row: span 2;
    align-self: center;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--brand-soft);
    color: var(--brand-deep);
}

.menu__icon svg {
    width: 20px;
    height: 20px;
}

.menu__name {
    font-weight: 600;
    line-height: 1.35;
}

.menu__name .badge {
    margin-inline-start: 8px;
    vertical-align: 1px;
}

.menu__desc {
    font-size: 0.86rem;
    color: var(--ink-faint);
    line-height: 1.4;
}

.menu__foot {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.menu__all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--brand-deep);
    text-decoration: none;
}

.menu__all:hover,
.menu__all:focus-visible {
    background: var(--brand-tint);
}

/* The hamburger, and what the navigation becomes below the breakpoint. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.nav-toggle svg {
    width: 20px;
    height: 20px;
}

.nav-toggle__close {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
    display: block;
}

@media (max-width: 860px) {
    .nav-toggle {
        display: inline-flex;
    }

    .nav {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 12px var(--gutter) 22px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        display: none;
    }

    .nav.is-open {
        display: flex;
    }

    .nav__link {
        justify-content: space-between;
        padding-inline: 12px;
        font-size: 1.02rem;
    }

    .nav__cta {
        margin: 10px 12px 0;
        justify-content: center;
    }

    /* In the stacked navigation the panel is not floating — it expands in place,
       so the page below it moves rather than being covered. */
    .menu {
        position: static;
        width: auto;
        margin: 2px 0 8px;
        padding: 6px;
        border-radius: var(--radius-sm);
        box-shadow: none;
        background: var(--surface-sunken);
        display: none;
        opacity: 1;
        transform: none;
        visibility: visible;
        transition: none;
    }

    .menu.is-open {
        display: block;
    }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    color: var(--ink-invert);
    padding-block: clamp(64px, 9vw, 116px);
}

/* Two soft lights behind the copy — a blue one high on the starting side and a
   cyan one low on the other — so the navy is not a flat slab. Purely decorative,
   hence aria-hidden on the element that carries it. */
.hero::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto -20%;
    height: 120%;
    background:
        radial-gradient(48% 46% at 22% 26%, rgba(37, 99, 235, 0.55), transparent 68%),
        radial-gradient(42% 44% at 82% 78%, rgba(6, 182, 212, 0.38), transparent 70%);
    pointer-events: none;
}

/* A faint grid, to read as "engineering" without a stock photograph. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
    pointer-events: none;
}

.hero .wrap {
    position: relative;
    z-index: 1;
}

.hero__inner {
    max-width: 760px;
}

.hero--center .hero__inner {
    max-width: 780px;
    margin-inline: auto;
    text-align: center;
}

.hero--center .btn-row {
    justify-content: center;
}

.hero h1 {
    color: #fff;
    margin-bottom: 20px;
}

.hero__lede {
    font-size: clamp(1.08rem, 1rem + 0.6vw, 1.32rem);
    line-height: 1.6;
    color: var(--ink-invert-soft);
    margin-bottom: 32px;
}

.hero__note {
    margin: 22px 0 0;
    font-size: 0.92rem;
    color: var(--ink-invert-faint);
}

.hero__note a {
    color: var(--ink-invert-soft);
}

/* The compact hero used by the interior pages. */
.hero--slim {
    padding-block: clamp(48px, 6vw, 76px);
}

.hero--slim h1 {
    font-size: clamp(2rem, 1.5rem + 2.2vw, 2.9rem);
}

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

.crumbs {
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: var(--ink-invert-faint);
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.crumbs li + li::before {
    content: "/";
    margin-inline-end: 8px;
    color: rgba(255, 255, 255, 0.3);
}

.crumbs a {
    color: var(--ink-invert-soft);
    text-decoration: none;
}

.crumbs a:hover {
    color: #fff;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.badge--plain {
    padding-inline: 12px;
}

.badge--plain::before {
    display: none;
}

.badge--live {
    background: var(--live-soft);
    color: var(--live);
}

.badge--soon {
    background: var(--soon-soft);
    color: var(--soon);
}

.badge--on-navy {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.24);
}

.badge--on-navy.badge--live::before {
    background: var(--accent-bright);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

.grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid--products {
    grid-template-columns: 1fr;
}

@media (min-width: 720px) {
    .grid--products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.card--link:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

.card__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 13px;
    background: var(--brand-soft);
    color: var(--brand-deep);
}

.card__icon svg {
    width: 24px;
    height: 24px;
}

.card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.card__title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.card__title-link {
    color: inherit;
    text-decoration: none;
}

/* Stretched hit area: the whole card is clickable, but only the title is a link,
   so a screen reader announces one link per card rather than three. */
.card__title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.card__title-link:focus-visible {
    outline: none;
}

.card__title-link:focus-visible::after {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.card p {
    color: var(--ink-soft);
    margin-bottom: 0;
}

.card__meta {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-deep);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card__meta svg {
    width: 14px;
    height: 14px;
}

.card__spacer {
    flex: 1;
}

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */

.product-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.product-layout {
    display: grid;
    gap: clamp(32px, 5vw, 56px);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

@media (min-width: 920px) {
    .product-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

.prose h2 {
    margin-top: 1.7em;
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.72rem);
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    margin-top: 1.5em;
}

.prose > p,
.prose > ul {
    color: var(--ink-soft);
}

.prose ul {
    margin-bottom: 1.2em;
}

.prose li {
    margin-bottom: 0.45em;
}

.prose li::marker {
    color: var(--brand);
}

.feature-list {
    display: grid;
    gap: 16px;
    padding: 0;
    margin: 0 0 1.4em;
    list-style: none;
}

.feature-list li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    color: var(--ink-soft);
    margin: 0;
}

.feature-list svg {
    width: 22px;
    height: 22px;
    margin-top: 3px;
    color: var(--brand);
    flex: none;
}

.feature-list strong {
    color: var(--ink);
    font-weight: 600;
}

.aside {
    position: sticky;
    top: 92px;
    padding: 24px;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

@media (max-width: 919px) {
    .aside {
        position: static;
    }
}

.aside h2 {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 16px;
}

.facts {
    margin: 0 0 22px;
    display: grid;
    gap: 14px;
}

.facts > div {
    display: grid;
    gap: 2px;
}

.facts dt {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.facts dd {
    margin: 0;
    font-weight: 500;
    color: var(--ink);
}

.aside .btn {
    width: 100%;
}

.aside__note {
    margin: 14px 0 0;
    font-size: 0.86rem;
    color: var(--ink-faint);
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Steps, stats and other small blocks
   -------------------------------------------------------------------------- */

.steps {
    counter-reset: step;
    display: grid;
    gap: 22px;
    padding: 0;
    margin: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.steps li {
    counter-increment: step;
    padding-top: 18px;
    border-top: 2px solid var(--border-strong);
    color: var(--ink-soft);
}

.steps li::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--brand);
}

.steps strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.05rem;
    color: var(--ink);
}

/* --------------------------------------------------------------------------
   Call to action strip
   -------------------------------------------------------------------------- */

.cta {
    position: relative;
    overflow: hidden;
    background: var(--navy);
    color: #fff;
}

.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 80% at 80% 50%, rgba(6, 182, 212, 0.32), transparent 70%),
        radial-gradient(50% 70% at 12% 20%, rgba(37, 99, 235, 0.4), transparent 72%);
    pointer-events: none;
}

.cta .wrap {
    position: relative;
    z-index: 1;
}

.cta__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
    padding-block: clamp(48px, 7vw, 80px);
}

.cta__text {
    max-width: 560px;
}

.cta h2 {
    color: #fff;
    margin-bottom: 10px;
}

.cta p {
    color: var(--ink-invert-soft);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.contact-card {
    padding: 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.contact-card .card__title {
    margin-bottom: 6px;
}

.contact-card p {
    color: var(--ink-soft);
    margin-bottom: 12px;
}

.contact-card a {
    font-weight: 600;
    word-break: break-word;
}

address {
    font-style: normal;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--navy);
    color: var(--ink-invert-soft);
    padding-block: clamp(48px, 6vw, 72px) 28px;
    font-size: 0.95rem;
}

.site-footer a {
    color: var(--ink-invert-soft);
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    padding-bottom: 32px;
}

@media (min-width: 620px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 36px;
    }
}

@media (min-width: 980px) {
    .footer-grid {
        grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
    }
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.12rem;
    color: #fff;
    text-decoration: none;
    margin-bottom: 14px;
}

.footer-brand__mark {
    width: 28px;
    height: 28px;
}

.footer-about {
    color: var(--ink-invert-faint);
    max-width: 330px;
    margin-bottom: 0;
    font-size: 0.92rem;
}

.footer-col h2 {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-invert-faint);
    margin-bottom: 14px;
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid var(--navy-line);
    font-size: 0.88rem;
    color: var(--ink-invert-faint);
}

.footer-bottom p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.notfound {
    display: grid;
    place-items: center;
    text-align: center;
    padding-block: clamp(72px, 12vw, 140px);
}

.notfound__code {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--brand);
    margin-bottom: 14px;
}