:root {
    --ink: #0f2038;
    --ink-soft: #4c5a6e;
    --paper: #f3f4f0;
    --paper-2: #e6e8e1;
    --paper-3: #daddd4;
    --teal: #1d5fa8;
    --teal-dark: #123f73;
    --ochre: #e8791d;
    --red: #c0392b;
    --green: #2f8f5b;
    --line: #ccd0c7;
    --white: #f8f9f4;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter',sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Fraunces',serif;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.mono {
    font-family: 'IBM Plex Mono',monospace;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.72rem;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}

:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
}

/* ---------- NAV ---------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(239,241,234,0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}

    .nav .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 20px;
        padding-bottom: 20px;
    }

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

.nav-mark {
    height: 32px;
    width: auto;
    flex: 0 0 auto;
}

.nav-brand-text {
    font-family: 'Fraunces',serif;
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: -0.01em;
}

    .nav-brand-text span {
        color: var(--teal);
    }

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

    .nav-links a.navlink {
        font-family: 'IBM Plex Mono',monospace;
        font-size: 0.72rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-soft);
        transition: color .15s ease;
        font-weight:bold;
    }

        .nav-links a.navlink:hover {
            color: var(--ink);
        }

        .nav-links a.navlink.btn-solid,
        .nav-links a.navlink.btn-solid:hover {
            color: var(--white);
        }

/* ---------- LANG SWITCH ---------- */
.lang-switch {
    position: relative;
}

.lang-switch-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--ink-soft);
    transition: color .15s ease;
}

    .lang-switch-trigger img {
        border-radius: 50%;
    }

    .lang-switch-trigger:hover {
        color: var(--ink);
    }

.lang-switch-menu {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 200px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(15,32,56,0.14);
    padding: 6px;
    z-index: 60;
}

    .lang-switch-menu.open {
        display: block;
    }

.lang-switch-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    font-family: 'Inter',sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
    transition: background .12s ease, color .12s ease;
}

    .lang-switch-item img {
        border-radius: 50%;
        flex: 0 0 auto;
    }

    .lang-switch-item:hover {
        background: var(--paper-2);
        color: var(--ink);
    }

    .lang-switch-item.active {
        color: var(--ink);
        font-weight: 600;
    }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'IBM Plex Mono',monospace;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 11px 20px;
    border-radius: 2px;
    border: 1px solid var(--ink);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.btn-solid {
    background: var(--ink);
    color: var(--white);
}

    .btn-solid:hover {
        background: var(--teal-dark);
        border-color: var(--teal-dark);
        transform: translateY(-1px);
    }

/* ---------- HERO ---------- */
.hero {
    padding: 88px 0 60px;
    position: relative;
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--teal-dark);
    margin-bottom: 22px;
}

    .eyebrow::before {
        content: "";
        width: 22px;
        height: 1px;
        background: var(--teal-dark);
    }

.hero h1 {
    font-size: clamp(2.3rem, 4.4vw, 3.6rem);
    line-height: 1.06;
    max-width: 14ch;
}

    .hero h1 em {
        font-style: italic;
        color: var(--teal-dark);
    }

.hero p.lede {
    margin-top: 24px;
    font-size: 1.08rem;
    color: var(--ink-soft);
    max-width: 46ch;
}

.hero-actions {
    margin-top: 36px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-outline {
    border: 1px solid var(--ink);
    color: var(--ink);
    background: transparent;
}

    .btn-outline:hover {
        background: var(--ink);
        color: var(--white);
    }

.stat-row {
    margin-top: 52px;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding-top: 26px;
}

.stat {
    padding: 0 18px;
}

    .stat:first-child {
        padding-left: 0;
    }

    .stat:not(:first-child) {
        border-left: 1px solid var(--line);
    }

    /* Cycles the same accent palette already used for the pillar cards and capability steps,
       instead of every number sharing the same neutral --ink. */
    .stat:nth-child(1) b {
        color: var(--teal);
    }

    .stat:nth-child(2) b {
        color: var(--ochre);
    }

    .stat:nth-child(3) b {
        color: var(--teal-dark);
    }

.stat b {
    display: block;
    font-family: 'Fraunces',serif;
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--ink);
}

.stat span {
    color: var(--ink-soft);
    font-size: 0.86rem;
}

/* ---------- QUADRANT SIGNATURE ---------- */
.quadrant-wrap {
    position: relative;
    aspect-ratio: 1/1;
    max-width: 460px;
}

    .quadrant-wrap svg {
        width: 100%;
        height: 100%;
        overflow: visible;
    }

.q-seg {
    transition: transform .35s ease, opacity .35s ease;
    transform-origin: center;
    cursor: default;
}

    .q-seg:hover {
        transform: scale(1.035);
    }

.q-label {
    font-family: 'IBM Plex Mono',monospace;
    font-size: 13.5px;
    letter-spacing: 0.03em;
}

.q-num {
    font-family: 'Fraunces',serif;
    font-weight: 500;
}

/* ---------- ORIGIN ---------- */
.origin {
    background: var(--ink);
    color: var(--paper);
    padding: 84px 0;
}

    .origin .wrap {
        display: grid;
        grid-template-columns: 0.9fr 1.4fr;
        gap: 56px;
    }

    .origin .mono {
        color: #8fa4c4;
    }

    .origin h2 {
        color: var(--paper);
        font-size: clamp(1.6rem,2.6vw,2.15rem);
        line-height: 1.18;
        margin-top: 14px;
    }

.origin-quote {
    font-family: 'Fraunces',serif;
    font-style: italic;
    font-size: 1.32rem;
    line-height: 1.5;
    color: var(--white);
    border-left: 2px solid var(--teal);
    padding-left: 26px;
}

    .origin-quote cite {
        display: block;
        margin-top: 18px;
        font-style: normal;
        font-family: 'IBM Plex Mono',monospace;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #8fa4c4;
    }

        .origin-quote cite a {
            border-bottom: 1px solid #3f527a;
        }

.origin-body p {
    color: #c5cbc2;
    margin-top: 22px;
    max-width: 56ch;
}

/* ---------- PILLARS ---------- */
.pillars {
    padding: 100px 0 88px;
}

.section-head {
    max-width: 640px;
    margin-bottom: 56px;
}

    .section-head h2 {
        font-size: clamp(1.7rem,3vw,2.3rem);
        margin-top: 14px;
    }

    .section-head p {
        color: var(--ink-soft);
        margin-top: 16px;
        font-size: 1.02rem;
    }

.pillar-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
}

.pillar {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--line);
    padding: 34px 26px 34px;
    background: var(--paper);
    box-shadow: 0 1px 2px rgba(15,32,56,0.04), 0 8px 24px rgba(15,32,56,0.05);
    transition: transform .25s ease, box-shadow .25s ease;
}

    /* Colored top accent bar, cycling through the existing brand palette per card instead of
       all four pillars sharing the same plain hairline border. */
    .pillar::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--teal);
    }

    .pillar:nth-child(2)::before {
        background: var(--red);
    }

    .pillar:nth-child(3)::before {
        background: var(--green);
    }

    .pillar:nth-child(4)::before {
        background: var(--ochre);
    }

    .pillar:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 10px rgba(15,32,56,0.07), 0 18px 34px rgba(15,32,56,0.09);
    }

.pillar-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    color: var(--teal);
}

    .pillar-icon svg {
        width: 100%;
        height: 100%;
    }

.pillar:nth-child(2) .pillar-icon {
    color: var(--red);
}

.pillar:nth-child(3) .pillar-icon {
    color: var(--green);
}

.pillar:nth-child(4) .pillar-icon {
    color: var(--ochre);
}

.pillar-num {
    font-family: 'IBM Plex Mono',monospace;
    font-size: 0.75rem;
    color: var(--teal-dark);
    letter-spacing: 0.05em;
}

.pillar h3 {
    font-size: 1.14rem;
    margin-top: 16px;
    font-weight: 500;
}

.pillar p {
    margin-top: 12px;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

/* ---------- CAPABILITIES ---------- */
.capabilities {
    background: var(--paper-2);
    padding: 96px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

/* A pipeline, not a grid of parallel cards - the four steps are a sequence (coleta →
   filtros → análise → exportação), so a connected flow reads more accurately than
   independent tiles, and keeps this section visually distinct from the four-domain
   pillar cards above it. */
.cap-flow {
    display: flex;
    align-items: flex-start;
}

.cap-step {
    flex: 1;
    min-width: 0;
    padding: 0 18px;
}

    .cap-step:first-child {
        padding-left: 0;
    }

    .cap-step:last-child {
        padding-right: 0;
    }

.cap-step-marker {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

.cap-step-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'IBM Plex Mono',monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--white);
    background: var(--teal-dark);
}

.cap-step-line {
    flex: 1;
    height: 2px;
    margin-left: 10px;
    background: var(--line);
}

/* Step 3 (análise/estatística) is the actual payoff of the whole pipeline, so the entire
   step - marker, connecting line and card - is lifted into one raised accent panel via a
   ::before that bleeds into the neighboring gutters, rather than only the card standing out.
   Using a pseudo-element (instead of padding/margin on the flex item itself) keeps the
   step-number circle perfectly row-aligned with 01/02/04. */
.cap-step-featured {
    position: relative;
}

    .cap-step-featured::before {
        content: "";
        position: absolute;
        top: -18px;
        left: -14px;
        right: -6px;
        bottom: -22px;
        background: var(--paper);
        border: 1px solid var(--ochre);
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(232,121,29,0.16);
    }

    .cap-step-featured .cap-step-marker,
    .cap-step-featured .cap {
        position: relative;
    }

.cap-step-featured .cap-step-num {
    width: 42px;
    height: 42px;
    font-size: 0.85rem;
    background: var(--ochre);
    box-shadow: 0 0 0 4px rgba(232,121,29,0.15);
}

.cap-step-featured .cap-step-line {
    background: var(--ochre);
    opacity: 0.4;
}

.cap-step-featured .cap-featured-tag {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ochre);
    color: var(--white);
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.62rem;
    white-space: nowrap;
    z-index: 1;
}

.cap {
    background: transparent;
}

    .cap .mono {
        color: var(--ochre);
    }

    .cap h3 {
        font-size: 1.16rem;
        margin-top: 14px;
        font-weight: 500;
    }

    .cap p {
        margin-top: 12px;
        color: var(--ink-soft);
        font-size: 0.95rem;
        max-width: 44ch;
    }

    .cap ul {
        margin-top: 16px;
        list-style: none;
    }

        .cap ul li {
            font-family: 'IBM Plex Mono',monospace;
            font-size: 0.78rem;
            color: var(--ink-soft);
            padding: 6px 0;
            border-top: 1px solid var(--line);
        }

            .cap ul li:first-child {
                border-top: none;
            }

/* ---------- VALIDATION ---------- */
.validation {
    padding: 100px 0;
}

.lang-table {
    margin-top: 44px;
    border-top: 1px solid var(--line);
}

.lang-row {
    display: grid;
    grid-template-columns: 120px 1fr 200px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
    gap: 18px;
}

    .lang-row .lang-flag {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid var(--line);
    }

    .lang-row .lang-name {
        color: var(--ink-soft);
        font-size: 0.95rem;
    }

    /* Status and "ver publicação" link used to be two separate columns saying roughly the
       same thing twice - merged into one: "Validado" becomes the link itself (green, with a
       check), "Em validação" stays plain text (ochre, with a clock) since there's nothing to
       link to yet. */
    .lang-row .lang-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: 'IBM Plex Mono',monospace;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #2f8f5b;
        justify-self: start;
        border-bottom: 1px solid transparent;
        transition: border-color .15s ease;
    }

        .lang-row .lang-status .status-icon {
            width: 14px;
            height: 14px;
            flex: 0 0 auto;
        }

        /* Underline visible by default (not just on hover) + an external-link arrow, so it
           reads as a clickable link at a glance instead of looking identical to the plain
           "Em validação" text next to it. */
        a.lang-status {
            border-bottom-color: rgba(47,143,91,0.45);
        }

        a.lang-status:hover {
            border-bottom-color: #2f8f5b;
        }

        a.lang-status .status-icon-external {
            width: 12px;
            height: 12px;
            opacity: 0.75;
        }

    .lang-row.pending .lang-status {
        color: var(--ochre);
    }

/* ---------- GET APP ---------- */
.get-app {
    padding: 100px 0;
    background: var(--paper-2);
}

.get-app-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 60px;
}

    .get-app-grid h2 {
        margin: 14px 0 16px;
        max-width: 14ch;
    }

    .get-app-grid p {
        color: var(--ink-soft);
        max-width: 46ch;
        margin-bottom: 32px;
    }

.store-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--ink);
    color: var(--white);
    border-radius: 12px;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease;
}

    .store-badge:hover {
        transform: translateY(-2px);
        background: var(--teal-dark);
    }

    .store-badge .store-icon {
        width: 26px;
        height: 26px;
        flex: 0 0 auto;
    }

    .store-badge span {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        font-size: 1.05rem;
        font-weight: 600;
    }

    .store-badge small {
        font-size: 0.62rem;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        opacity: 0.75;
    }

.store-qrcodes {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.store-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
}

    .store-qr img {
        width: 120px;
        height: 120px;
        display: block;
    }

.store-qr-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
}

    .store-qr-label .store-icon {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
    }

    .store-qr-label span {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        font-size: 0.95rem;
        font-weight: 600;
        text-align: left;
    }

    .store-qr-label small {
        font-size: 0.6rem;
        font-weight: 500;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        opacity: 0.65;
    }

.get-app-visual {
    display: flex;
    justify-content: center;
}

/* Two-phone mockup (Android + iPhone) instead of a single generic device - shows the actual
   app UI (dashboard stats/chart on Android, the descriptive charts on iPhone) so the download
   section reads as "this is the app", not a stock illustration. Screen content is drawn with
   CSS/SVG rather than a screenshot image so it stays crisp at any size and needs no asset. */
.phone-duo {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1 / 1.05;
    margin: 0 auto;
}

.phone-duo-bg {
    position: absolute;
    inset: 0;
    border-radius: 32px;
    overflow: hidden;
    background: linear-gradient(150deg, var(--teal-dark) 0%, var(--teal) 70%);
    box-shadow: 0 30px 60px -20px rgba(15, 32, 56, 0.35);
}

    /* Soft overlapping "dune" shapes along the bottom edge, echoing the rest of the site's
       decorative-circle language instead of a flat gradient card. */
    .phone-duo-bg::before,
    .phone-duo-bg::after {
        content: "";
        position: absolute;
        left: -15%;
        right: -15%;
        border-radius: 50%;
        background: rgba(248, 249, 244, 0.12);
    }

    .phone-duo-bg::before {
        bottom: -18%;
        height: 42%;
    }

    .phone-duo-bg::after {
        bottom: -28%;
        height: 34%;
        background: rgba(248, 249, 244, 0.2);
    }

.phone-frame {
    position: absolute;
    bottom: 8%;
    width: 34%;
    aspect-ratio: 9 / 19.5;
    background: #0c1420;
    border-radius: 24px;
    padding: 5px;
    box-shadow: 0 18px 34px -10px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

    .phone-frame.android {
        left: 6%;
        transform: rotate(-8deg);
        border-radius: 20px;
    }

    .phone-frame.iphone {
        right: 6%;
        bottom: 12%;
        transform: rotate(7deg);
    }

.phone-notch {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #000;
    z-index: 2;
}

    .phone-frame.iphone .phone-notch {
        top: 7px;
        width: 34%;
        height: 11px;
        border-radius: 8px;
    }

.mock-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 19px;
    overflow: hidden;
    background: #10192c;
    display: flex;
    flex-direction: column;
    padding: 16px 8px 8px;
    gap: 8px;
}

    .phone-frame.android .mock-screen {
        border-radius: 15px;
    }

.mock-title {
    color: var(--white);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0 2px;
}

.mock-stats {
    display: flex;
    gap: 4px;
    padding: 0 2px;
}

.mock-stat {
    flex: 1;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 5px 4px;
    text-align: center;
}

    .mock-stat span {
        display: block;
        font-size: 8px;
        font-weight: 700;
        color: var(--c, var(--white));
    }

.mock-chart {
    flex: 1;
    width: 100%;
}

/* Floating brand mark bridging the two phones - reuses the exact four quadrant colors from
   the hero diagram and pillar cards so it reads as the same product, not a stock badge. */
.app-badge {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 15%;
    aspect-ratio: 1 / 1;
    min-width: 44px;
    max-width: 60px;
    transform: translate(-50%, -50%) rotate(-8deg);
    background: var(--white);
    border-radius: 30%;
    box-shadow: 0 14px 26px -6px rgba(15, 32, 56, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

    .app-badge svg {
        width: 55%;
        height: 55%;
    }

/* ---------- CTA ---------- */
.cta {
    position: relative;
    overflow: hidden;
    background: var(--teal-dark);
    color: var(--white);
    padding: 90px 0;
}

.cta-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,rgba(18,63,115,0.88),rgba(18,63,115,0.72));
}

    .cta .wrap {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        flex-wrap: wrap;
    }

    .cta h2 {
        color: var(--white);
        font-size: clamp(1.7rem,3.2vw,2.5rem);
        max-width: 16ch;
    }

    .cta .mono {
        color: #aecbe8;
    }

    .cta .btn-solid {
        background: var(--white);
        color: var(--teal-dark);
        border-color: var(--white);
    }

        .cta .btn-solid:hover {
            background: var(--paper);
        }

/* ---------- FOOTER ---------- */
footer {
    padding: 44px 0;
    border-top: 1px solid var(--line);
}

    footer .wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 14px;
    }

    footer .mono {
        color: var(--ink-soft);
    }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .quadrant-wrap {
        margin-top: 20px;
        max-width: 340px;
    }

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

    .pillar-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .cap-flow {
        flex-direction: column;
    }

        .cap-step {
            display: flex;
            align-items: flex-start;
            padding: 0;
            gap: 18px;
        }

            .cap-step:first-child,
            .cap-step:last-child {
                padding: 0;
            }

        .cap-step-marker {
            flex-direction: column;
            align-items: center;
            align-self: stretch;
            margin-bottom: 0;
        }

        .cap-step-line {
            width: 2px;
            height: auto;
            flex: 1;
            margin-left: 0;
            margin-top: 10px;
        }

        .cap-step:last-child .cap-step-line {
            visibility: hidden;
        }

        .cap-step .cap {
            padding-bottom: 32px;
        }

        /* Base ::before bleed (-18px/-22px) is sized for the roomy desktop row gutters; in the
           tightly stacked mobile list even a modest bleed reaches past the step's own 32px
           bottom cushion into the next step's circle, so the bleed is pulled way in and the
           step itself gets its own margin for real clearance from its neighbors. */
        .cap-step-featured {
            margin: 18px 0;
        }

        .cap-step-featured::before {
            top: -8px;
            bottom: -8px;
        }

    .lang-row {
        grid-template-columns: 80px 1fr auto;
    }

    .get-app-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

        .get-app-grid h2 {
            margin-left: auto;
            margin-right: auto;
        }

        .get-app-grid p {
            margin-left: auto;
            margin-right: auto;
        }

    .store-badges {
        justify-content: center;
    }

    .store-qrcodes {
        justify-content: center;
    }

    .get-app-visual {
        order: -1;
    }
}

@media (max-width:560px) {
    .wrap {
        padding: 0 20px;
    }

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

    .nav-links {
        gap: 16px;
    }

        .nav-links a.navlink:not(.btn) {
            display: none;
        }

    .cta .wrap {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s ease, transform .6s ease;
}

    .reveal.in {
        opacity: 1;
        transform: translateY(0);
    }