/* Explain: App-specific layout utilities. */
.tabc-container {
    width: 100%;
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 20px;
}

.tabc-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.tabc-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 14px;
}

.tabc-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--surface-color) 0%, #ffffff 100%);
    padding: 56px 0 72px;
}

.tabc-hero::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -130px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.22), rgba(20, 184, 166, 0) 70%);
    pointer-events: none;
}

.tabc-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 40px;
    align-items: center;
}

@media (min-width: 1024px) {
    .tabc-hero-grid {
        grid-template-columns: 1.05fr 1fr;
        gap: 64px;
    }
}

.tabc-section {
    padding: 64px 0;
}

@media (min-width: 768px) {
    .tabc-section {
        padding: 88px 0;
    }
}

.tabc-narrow {
    max-width: 820px;
}

.tabc-cards {
    display: grid;
    gap: 22px;
}

@media (min-width: 640px) {
    .tabc-cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .tabc-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.tabc-imageband {
    padding: 16px 0 32px;
}

.tabc-contact {
    padding: 40px 0 96px;
}