```css id="global01"
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM GLOBAL SYSTEM
   ------------------------------------------------------------
   File: /assets/css/base/global.css
   Version: 1.0

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - utilities.css

   Purpose:
   - Global document behavior
   - Site wrapper
   - Main content
   - Premium container behavior
   - Global sections
   - Scrollbar
   - Selection
   - Global image behavior
   - Common surfaces
   - Accessibility states
   - Site-wide structural rules

   IMPORTANT:
   Do not add page-specific styling here.
   Do not add navbar/topbar/footer styling here.
   ============================================================ */


/* ============================================================
   01. ROOT DOCUMENT
   ============================================================ */

html {
    width: 100%;

    min-height: 100%;

    background:
        var(--bg-body);
}


/* ============================================================
   02. BODY
   ============================================================ */

body {
    position: relative;

    width: 100%;

    min-width: 320px;
    min-height: 100vh;

    margin: 0;

    color:
        var(--text-body);

    background:
        var(--bg-body);

    font-family:
        var(--font-body);

    overflow-x: hidden;
}


/* ============================================================
   03. BODY MENU LOCK
   Used by mobile navigation / modal states.
   ============================================================ */

body.menu-open,
body.no-scroll {
    overflow: hidden;
}


/* ============================================================
   04. SITE WRAPPER
   ============================================================ */

.site-wrapper {
    position: relative;

    width: 100%;

    min-height: 100vh;

    background:
        var(--bg-body);

    isolation: isolate;
}


/* ============================================================
   05. MAIN CONTENT
   ============================================================ */

#main-content,
main {
    position: relative;

    z-index:
        var(--z-base);

    width: 100%;
}


/* ============================================================
   06. BOOTSTRAP CONTAINER OVERRIDE
   Gives the complete website one consistent premium width.
   ============================================================ */

.container {
    width: 100%;

    max-width:
        var(--container-premium);

    margin-right: auto;
    margin-left: auto;

    padding-right:
        var(--container-padding);

    padding-left:
        var(--container-padding);
}


/* ============================================================
   07. FULL WIDTH SECTION
   ============================================================ */

.site-section {
    position: relative;

    width: 100%;

    padding-top:
        var(--section-space);

    padding-bottom:
        var(--section-space);

    overflow: hidden;

    isolation: isolate;
}


/* ============================================================
   08. SMALL SECTION
   ============================================================ */

.site-section-sm {
    position: relative;

    width: 100%;

    padding-top:
        var(--section-space-sm);

    padding-bottom:
        var(--section-space-sm);

    overflow: hidden;

    isolation: isolate;
}


/* ============================================================
   09. LARGE SECTION
   ============================================================ */

.site-section-lg {
    position: relative;

    width: 100%;

    padding-top:
        var(--section-space-lg);

    padding-bottom:
        var(--section-space-lg);

    overflow: hidden;

    isolation: isolate;
}


/* ============================================================
   10. EXTRA LARGE SECTION
   ============================================================ */

.site-section-xl {
    position: relative;

    width: 100%;

    padding-top:
        var(--section-space-xl);

    padding-bottom:
        var(--section-space-xl);

    overflow: hidden;

    isolation: isolate;
}


/* ============================================================
   11. SECTION WITHOUT OVERFLOW CLIPPING
   ============================================================ */

.site-section-visible {
    overflow: visible;
}


/* ============================================================
   12. WHITE SECTION
   ============================================================ */

.section-white {
    background:
        var(--bg-white);
}


/* ============================================================
   13. IVORY SECTION
   ============================================================ */

.section-ivory {
    background:
        var(--bg-body);
}


/* ============================================================
   14. SOFT SECTION
   ============================================================ */

.section-soft {
    background:
        var(--bg-soft);
}


/* ============================================================
   15. MUTED SECTION
   ============================================================ */

.section-muted {
    background:
        var(--bg-muted);
}


/* ============================================================
   16. DARK EMERALD SECTION
   ============================================================ */

.section-dark {
    color:
        rgba(255, 255, 255, 0.76);

    background:
        var(--gradient-primary-dark);
}


/* ============================================================
   17. PRIMARY EMERALD SECTION
   ============================================================ */

.section-primary {
    color:
        rgba(255, 255, 255, 0.76);

    background:
        var(--gradient-primary);
}


/* ============================================================
   18. GOLD SOFT SECTION
   ============================================================ */

.section-gold-soft {
    background:
        var(--bg-gold-soft);
}


/* ============================================================
   19. SECTION CONTENT LAYER
   ============================================================ */

.section-content {
    position: relative;

    z-index:
        var(--z-content);
}


/* ============================================================
   20. GLOBAL SECTION DECORATION
   ============================================================ */

.section-decoration {
    position: absolute;

    z-index: 0;

    pointer-events: none;

    user-select: none;
}


/* ============================================================
   21. GOLD GLOW
   ============================================================ */

.glow-gold {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius:
        var(--radius-circle);

    background:
        var(--glow-gold);

    pointer-events: none;

    user-select: none;
}


/* ============================================================
   22. EMERALD GLOW
   ============================================================ */

.glow-emerald {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius:
        var(--radius-circle);

    background:
        var(--glow-emerald);

    pointer-events: none;

    user-select: none;
}


/* ============================================================
   23. GLOBAL IMAGE
   ============================================================ */

img {
    max-width: 100%;

    height: auto;

    vertical-align: middle;
}


/* ============================================================
   24. RESPONSIVE MEDIA
   ============================================================ */

picture {
    display: block;

    width: 100%;
}

picture img {
    width: 100%;
}


/* ============================================================
   25. PREMIUM IMAGE SURFACE
   ============================================================ */

.premium-image {
    position: relative;

    overflow: hidden;

    border-radius:
        var(--radius-xl);

    background:
        var(--bg-muted);
}

.premium-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform var(--transition-premium);
}

.premium-image:hover img {
    transform:
        scale(1.035);
}


/* ============================================================
   26. IMAGE OVERLAY FOUNDATION
   ============================================================ */

.image-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;
}


/* ============================================================
   27. PREMIUM WHITE SURFACE
   ============================================================ */

.surface-white {
    position: relative;

    background:
        var(--bg-white);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-sm);
}


/* ============================================================
   28. PREMIUM IVORY SURFACE
   ============================================================ */

.surface-ivory {
    position: relative;

    background:
        var(--bg-soft);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-xl);
}


/* ============================================================
   29. PREMIUM DARK SURFACE
   ============================================================ */

.surface-dark {
    position: relative;

    color:
        var(--text-white);

    background:
        var(--gradient-primary-dark);

    border:
        1px solid var(--border-white);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-premium-dark);
}


/* ============================================================
   30. PREMIUM GLASS SURFACE
   ============================================================ */

.surface-glass {
    position: relative;

    background:
        var(--glass-light);

    border:
        1px solid var(--glass-border);

    border-radius:
        var(--radius-xl);

    box-shadow:
        var(--shadow-sm);

    -webkit-backdrop-filter:
        blur(var(--glass-blur));

    backdrop-filter:
        blur(var(--glass-blur));
}


/* ============================================================
   31. DARK GLASS SURFACE
   ============================================================ */

.surface-glass-dark {
    position: relative;

    color:
        var(--text-white);

    background:
        var(--glass-dark);

    border:
        1px solid var(--glass-border);

    border-radius:
        var(--radius-xl);

    -webkit-backdrop-filter:
        blur(var(--glass-blur));

    backdrop-filter:
        blur(var(--glass-blur));
}


/* ============================================================
   32. GLOBAL HORIZONTAL DIVIDER
   ============================================================ */

.premium-divider {
    width: 100%;
    height: 1px;

    border: 0;

    background:
        var(--border-light);
}


/* ============================================================
   33. GOLD DIVIDER
   ============================================================ */

.gold-divider {
    width: 64px;
    height: 1px;

    border: 0;

    background:
        var(--gradient-gold);
}


/* ============================================================
   34. VERTICAL DIVIDER
   ============================================================ */

.vertical-divider {
    width: 1px;

    align-self: stretch;

    background:
        var(--border-light);
}


/* ============================================================
   35. LINK GLOBAL FOCUS
   ============================================================ */

a:focus-visible {
    border-radius:
        var(--radius-xs);

    outline:
        2px solid var(--focus-border);

    outline-offset:
        4px;
}


/* ============================================================
   36. BUTTON GLOBAL FOCUS
   ============================================================ */

button:focus-visible {
    outline:
        2px solid var(--focus-border);

    outline-offset:
        4px;
}


/* ============================================================
   37. FORM GLOBAL FOCUS
   ============================================================ */

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;

    border-color:
        var(--focus-border);

    box-shadow:
        var(--focus-ring);
}


/* ============================================================
   38. GLOBAL DISABLED STATE
   ============================================================ */

[aria-disabled="true"],
.disabled {
    pointer-events: none;

    cursor: not-allowed;

    opacity:
        var(--opacity-disabled);
}


/* ============================================================
   39. SCROLLBAR - FIREFOX
   ============================================================ */

html {
    scrollbar-width: thin;

    scrollbar-color:
        var(--scrollbar-thumb)
        var(--scrollbar-track);
}


/* ============================================================
   40. SCROLLBAR - WEBKIT
   ============================================================ */

::-webkit-scrollbar {
    width:
        var(--scrollbar-width);

    height:
        var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background:
        var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    border:
        2px solid var(--scrollbar-track);

    border-radius:
        var(--radius-pill);

    background:
        var(--scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
    background:
        var(--scrollbar-thumb-hover);
}


/* ============================================================
   41. TEXT SELECTION
   ============================================================ */

::selection {
    color:
        var(--selection-text);

    background:
        var(--selection-bg);
}

::-moz-selection {
    color:
        var(--selection-text);

    background:
        var(--selection-bg);
}


/* ============================================================
   42. GLOBAL LIST FOUNDATION
   ============================================================ */

.clean-list {
    margin: 0;

    padding: 0;

    list-style: none;
}


/* ============================================================
   43. INLINE ICON ALIGNMENT
   ============================================================ */

.inline-icon {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    line-height: 1;
}


/* ============================================================
   44. ICON CIRCLE
   ============================================================ */

.icon-circle {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    border-radius:
        var(--radius-circle);

    color:
        var(--color-primary);

    background:
        var(--bg-gold-soft);

    border:
        1px solid var(--border-gold);
}


/* ============================================================
   45. GOLD ICON CIRCLE
   ============================================================ */

.icon-circle-gold {
    color:
        var(--text-on-gold);

    background:
        var(--gradient-gold);

    border-color:
        transparent;

    box-shadow:
        var(--shadow-gold);
}


/* ============================================================
   46. DARK ICON CIRCLE
   ============================================================ */

.icon-circle-dark {
    color:
        var(--color-secondary-light);

    background:
        var(--color-primary);

    border-color:
        var(--border-white);
}


/* ============================================================
   47. GLOBAL BADGE FOUNDATION
   ============================================================ */

.premium-badge {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap:
        var(--space-2);

    min-height: 32px;

    padding:
        var(--space-2)
        var(--space-4);

    border:
        1px solid var(--border-gold);

    border-radius:
        var(--radius-pill);

    color:
        var(--color-secondary-dark);

    background:
        var(--bg-gold-soft);

    font-family:
        var(--font-ui);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-bold);

    line-height: 1;

    letter-spacing:
        var(--tracking-wide);

    text-transform:
        uppercase;
}


/* ============================================================
   48. DARK BADGE
   ============================================================ */

.premium-badge-dark {
    color:
        var(--color-secondary-light);

    background:
        rgba(255, 255, 255, 0.06);

    border-color:
        var(--border-white);
}


/* ============================================================
   49. GLOBAL CONTENT STACK
   ============================================================ */

.content-stack > * + * {
    margin-top:
        var(--space-5);
}


/* ============================================================
   50. LARGE CONTENT STACK
   ============================================================ */

.content-stack-lg > * + * {
    margin-top:
        var(--space-8);
}


/* ============================================================
   51. SMALL CONTENT STACK
   ============================================================ */

.content-stack-sm > * + * {
    margin-top:
        var(--space-3);
}


/* ============================================================
   52. GLOBAL SECTION HEADER WIDTH
   ============================================================ */

.section-header {
    position: relative;

    z-index:
        var(--z-content);

    max-width:
        760px;
}


/* ============================================================
   53. CENTERED SECTION HEADER
   ============================================================ */

.section-header-center {
    margin-right: auto;
    margin-left: auto;

    text-align: center;
}


/* ============================================================
   54. SECTION DESCRIPTION
   ============================================================ */

.section-description {
    max-width:
        650px;

    margin-top:
        var(--space-5);

    font-size:
        var(--font-size-md);

    line-height:
        var(--line-height-relaxed);

    color:
        var(--text-body);
}


/* ============================================================
   55. CENTERED SECTION DESCRIPTION
   ============================================================ */

.section-header-center
.section-description {
    margin-right: auto;
    margin-left: auto;
}


/* ============================================================
   56. DARK SECTION TEXT
   ============================================================ */

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6,
.section-primary h1,
.section-primary h2,
.section-primary h3,
.section-primary h4,
.section-primary h5,
.section-primary h6 {
    color:
        var(--text-white);
}

.section-dark p,
.section-primary p {
    color:
        rgba(255, 255, 255, 0.72);
}


/* ============================================================
   57. GLOBAL HOVER IMAGE ZOOM
   ============================================================ */

.hover-image-zoom {
    overflow: hidden;
}

.hover-image-zoom img {
    transition:
        transform var(--transition-premium);
}

.hover-image-zoom:hover img {
    transform:
        scale(1.05);
}


/* ============================================================
   58. GLOBAL CARD HOVER
   ============================================================ */

.hover-card {
    transition:
        transform var(--transition-premium),
        box-shadow var(--transition-premium),
        border-color var(--transition-premium);
}

.hover-card:hover {
    transform:
        var(--hover-lift);

    border-color:
        var(--border-gold);

    box-shadow:
        var(--shadow-premium);
}


/* ============================================================
   59. LOADING IMAGE FOUNDATION
   ============================================================ */

img[loading="lazy"] {
    background:
        var(--bg-muted);
}


/* ============================================================
   60. SMOOTH ANCHOR OFFSET
   ============================================================ */

[id] {
    scroll-margin-top:
        calc(
            var(--navbar-height) +
            var(--space-6)
        );
}


/* ============================================================
   61. NOSCRIPT
   ============================================================ */

noscript {
    display: block;

    padding:
        var(--space-4);

    color:
        var(--text-white);

    background:
        var(--color-danger);

    font-family:
        var(--font-body);

    font-size:
        var(--font-size-sm);

    text-align:
        center;
}


/* ============================================================
   62. GLOBAL RESPONSIVE SAFETY
   ============================================================ */

@media (max-width: 991.98px) {

    .site-section-xl {
        padding-top:
            var(--section-space-lg);

        padding-bottom:
            var(--section-space-lg);
    }

    .glow-gold,
    .glow-emerald {
        width: 380px;
        height: 380px;
    }

}


/* ============================================================
   63. MOBILE GLOBAL SYSTEM
   ============================================================ */

@media (max-width: 767.98px) {

    body {
        min-width: 0;
    }

    .container {
        padding-right:
            var(--container-padding);

        padding-left:
            var(--container-padding);
    }

    .site-section,
    .site-section-lg,
    .site-section-xl {
        padding-top:
            var(--section-space-sm);

        padding-bottom:
            var(--section-space-sm);
    }

    .site-section-sm {
        padding-top:
            var(--section-space-xs);

        padding-bottom:
            var(--section-space-xs);
    }

    .section-description {
        margin-top:
            var(--space-4);

        font-size:
            var(--font-size-base);
    }

    .glow-gold,
    .glow-emerald {
        width: 280px;
        height: 280px;
    }

    .surface-white,
    .surface-ivory,
    .surface-dark,
    .surface-glass,
    .surface-glass-dark {
        border-radius:
            var(--radius-lg);
    }

}


/* ============================================================
   64. VERY SMALL DEVICES
   ============================================================ */

@media (max-width: 374.98px) {

    .container {
        padding-right:
            var(--space-4);

        padding-left:
            var(--space-4);
    }

}


/* ============================================================
   65. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .premium-image img,
    .hover-image-zoom img,
    .hover-card {
        transition: none;
    }

    .premium-image:hover img,
    .hover-image-zoom:hover img,
    .hover-card:hover {
        transform: none;
    }

}


/* ============================================================
   END OF GLOBAL SYSTEM
   ============================================================ */
```