/* ── Hero ──────────────────────────────────────────────────────────────── */

.fi-hero {
    position: relative;
    padding-block: clamp(3rem, 5.5vw, 4.75rem) clamp(3.5rem, 6vw, 5.25rem);
    overflow: hidden;
}

/* A faint engineering grid — the only decoration on the page */
.fi-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
    background-size: 72px 72px;
    opacity: .55;
    mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 20%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 35%, #000 20%, transparent 100%);
    pointer-events: none;
}

.fi-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

.fi-hero__title { margin-bottom: 1.5rem; }

/* The hero phrase is long enough to overflow a narrow phone, so this one is
   allowed to break — unlike the short trailing phrases .fi-nowrap protects. */
@media (max-width: 26.25em) {
    .fi-hero__title .fi-nowrap { white-space: normal; }
}

.fi-hero__lead { max-width: 34ch; }

.fi-hero__actions {
    display: flex; flex-wrap: wrap; gap: .85rem;
    margin-top: 2.25rem;
}

.fi-hero__figure { display: grid; gap: 1.75rem; justify-items: center; }

/* ── Responsive (kept in this file: it must out-cascade responsive.css) ──── */

/* ≤ 900px — stack, copy first */
@media (max-width: 56.25em) {
    .fi-hero__inner { grid-template-columns: 1fr; }
    .fi-hero__copy   { order: 1; }
    .fi-hero__figure { order: 2; }
    .fi-hero__lead   { max-width: 46ch; }
}

/* ≤ 480px — full-width stacked CTAs */
@media (max-width: 30em) {
    .fi-hero__actions .fi-btn { flex: 1 1 100%; }
}