/* =========================================================
   AI Automation Toolbox V3
   LAYOUT / PAGE SHELL / GRIDS / SECTIONS
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

main {
    display: block;
}

.shell,
.container,
.aat-page {
    width: min(var(--aat-public-max), calc(100% - 40px));
    margin-inline: auto;
}

.aat-page {
    max-width: var(--aat-max-width);
}

.section,
.aat-section {
    padding: 80px 0;
}

.section-dark,
.aat-section-dark {
    background: var(--aat-bg-deep);
    border-top: 1px solid var(--aat-border-soft);
    border-bottom: 1px solid var(--aat-border-soft);
}

.page-shell,
.aat-page-shell {
    min-height: 100vh;
}

.page-main,
.aat-main {
    padding: 32px 0 72px;
}

.page-header,
.aat-page-header {
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--aat-border);
}

.page-header-row,
.aat-page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.back-nav,
.aat-back-nav {
    margin-bottom: 16px;
}

.back-link,
.aat-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--aat-orange);
    font-weight: 800;
}

.grid,
.aat-grid {
    display: grid;
    gap: 16px;
}

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

.grid-3,
.aat-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4,
.aat-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-grid,
.audience-grid,
.depth-grid,
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.two-column,
.split-layout,
.hero-grid,
.overview,
.real-product,
.operations-band {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
    align-items: start;
}

.flex,
.aat-flex {
    display: flex;
}

.flex-wrap,
.aat-flex-wrap {
    flex-wrap: wrap;
}

.items-center,
.aat-items-center {
    align-items: center;
}

.items-start,
.aat-items-start {
    align-items: flex-start;
}

.justify-between,
.aat-justify-between {
    justify-content: space-between;
}

.justify-center,
.aat-justify-center {
    justify-content: center;
}

.gap-2,
.aat-gap-2 {
    gap: 8px;
}

.gap-3,
.aat-gap-3,
.aat-gap {
    gap: 12px;
}

.gap-4,
.aat-gap-4 {
    gap: 16px;
}

.gap-5,
.aat-gap-5 {
    gap: 24px;
}

.mt-4,
.aat-mt-4 {
    margin-top: 16px;
}

.mt-5,
.aat-mt-5 {
    margin-top: 24px;
}

.mb-4,
.aat-mb-4 {
    margin-bottom: 16px;
}

.mb-5,
.aat-mb-5 {
    margin-bottom: 24px;
}

.w-full,
.aat-w-full {
    width: 100%;
}

.hidden,
.aat-hidden {
    display: none !important;
}