:root {
    /* Layout - Page Gutters (Responsive Horizontal Padding) */
    --gutter-desktop: 64px;
    --gutter-tablet: 32px;
    --gutter-mobile: 16px;

    /* Layout - Section Vertical Padding */
    --section-padding-desktop: 80px;
    --section-padding-tablet: 48px;
    --section-padding-mobile: 32px;

    /* Layout - Container Max Width */
    --max-container: 1440px;

    /* Transitions */
    --transition-fast: 0.3s ease;
}

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

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: #000000;
    -webkit-font-smoothing: antialiased;
}

p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

/* ============================================================
   1. MAIN CONTAINER LAYOUT (Width, Max-Width, Margin, Padding)
   Standard responsive container used across all sections
   ============================================================ */
.site-container,
.tk-container {
    max-width: var(--max-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter-desktop);
    padding-right: var(--gutter-desktop);
    width: 100%;
    box-sizing: border-box;
}

/* ============================================================
   2. SECTION VERTICAL PADDING (Responsive Top & Bottom Padding)
   Separate helper class for section spacing (taller on desktop, compact on mobile)
   ============================================================ */
.section-padding {
    padding-top: var(--section-padding-desktop);
    padding-bottom: var(--section-padding-desktop);
}

/* ============================================================
   3. FULL BLEED SECTION LAYOUT (Edge-to-Edge / Nembus Padding)
   Section layout that spans 100% viewport width without container margins/padding
   ============================================================ */
.section-full-bleed {
    width: 100%;
    max-width: 100%;
    position: relative;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS (Desktop, Tablet, Mobile)
   ============================================================ */
@media (max-width: 991px) {
    .site-container,
    .tk-container {
        padding-left: var(--gutter-tablet);
        padding-right: var(--gutter-tablet);
    }

    .section-padding {
        padding-top: var(--section-padding-tablet);
        padding-bottom: var(--section-padding-tablet);
    }
}

@media (max-width: 575px) {
    .site-container,
    .tk-container {
        padding-left: var(--gutter-mobile);
        padding-right: var(--gutter-mobile);
    }

    .section-padding {
        padding-top: var(--section-padding-mobile);
        padding-bottom: var(--section-padding-mobile);
    }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.anim-fade-in.anim-ready {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

.anim-fade-in.anim-fade-in-active {
    opacity: 1;
    transform: translateY(0);
}

.anim-fade-in.anim-fade-out-active {
    opacity: 0;
    transform: translateY(-30px);
}