/* ── Hero: asymmetric layout ─────────────────────────── */
.hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-h) + var(--s-64));
    padding-bottom: var(--s-64);
    overflow: hidden;
}

.hero__inner {
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;
    gap: var(--s-48);
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--s-24);
}

/* ── Text side ───────────────────────────────────────── */
.hero__content {
    display: flex;
    flex-direction: column;
    gap: var(--s-16);
}

.hero__kicker {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--c-accent);
}

.hero__title {
    font-size: clamp(2.25rem, 5vw + 0.5rem, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--c-white);
}

.hero__desc {
    font-size: 1.125rem;
    color: var(--c-text-dim);
    max-width: 520px;
    line-height: 1.6;
}

/* ── Geometric accent block (CSS-only, right side) ──── */
.hero__geo {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 320px;
}

.hero__geo-shape {
    position: absolute;
    border-radius: var(--r-lg);
}

.hero__geo-shape--rect {
    width: 75%;
    height: 70%;
    right: 0;
    top: 10%;
    background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-sec) 100%);
    opacity: 0.85;
}

.hero__geo-shape--circle {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: var(--c-accent-sec);
    opacity: 0.6;
    bottom: 5%;
    left: 5%;
}

.hero__geo-shape--line {
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, var(--c-accent), transparent);
    top: 50%;
    left: 0;
}

.hero__geo-shape--dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--c-white);
    opacity: 0.4;
    top: 20%;
    left: 15%;
}

/* ── Hero with background image (inner pages) ────────── */
.hero--image {
    min-height: 50vh;
}

.hero--image .hero__inner {
    grid-template-columns: 1fr;
}

.hero--image .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero--image .hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero--image .hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(11, 14, 26, 0.92) 50%, rgba(11, 14, 26, 0.6) 100%);
}

/* ── Hero minimal (inner pages without image) ────────── */
.hero--minimal {
    min-height: auto;
    padding-top: calc(var(--header-h) + var(--s-48));
    padding-bottom: var(--s-48);
}

.hero--minimal .hero__inner {
    grid-template-columns: 1fr;
}