/* layout_wrappers.css */

.container {
    width: min(1080px, 92%);
    margin: 0 auto;
}

.section {
    padding: clamp(52px, 7vh, 92px) 0;
    position: relative;
}

.section+.section::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: min(980px, 92%);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(17, 24, 39, 0.10), transparent);
    opacity: 0.45;
}

.section-header {
    display: grid;
    gap: 10px;
    margin-bottom: 22px;
}

.section-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    background: rgba(189, 224, 254, 0.22);
    border: 1px solid rgba(17, 24, 39, 0.06);
    color: rgba(31, 41, 55, 0.75);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* cute “paper” surface helper */
.surface {
    background: var(--card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-soft);
    box-shadow: var(--shadow-soft);
}

.section {
    padding: 4rem 1.5rem;
}

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
}