/* =============================================================
   BASE — CSS Variables, Reset, Body, Typography
   ============================================================= */

:root {
    --identity-black: #1D1D1B;
    --identity-black-rgb: 29, 29, 27;
    --brand-black:   #030303;
    --brand-black-rgb: 3, 3, 3;
    --brand-bronze:  #E1A973;
    --brand-bronze-rgb: 225, 169, 115;
    --brand-bronze-mid: #B48A5D;
    --brand-bronze-light: #E1A973;
    --brand-bronze-dark:  #886C47;
    --brand-background: #F8F4EF;
    --brand-champagne: #E6D2BE;
    --brand-border: #E8DED3;
    --bg-dark:       var(--brand-black);
    --card-bg:       var(--brand-black);
    --gold-primary:  #E1A973;
    --gold-glow:     #E1A973;
    --gold:          #E1A973;
    --border-color:  rgba(var(--brand-bronze-rgb), 0.22);
    --text-white:    #ffffff;
    --text-muted:    #b9afa3;
    --max-width:     1200px;
    --black:         var(--brand-black);
    --shadow-bronze: 0 12px 34px rgba(var(--brand-bronze-rgb), 0.22);
    --font-arabic: "Dubai", "Noto Kufi Arabic", "Tahoma", sans-serif;
}

/* Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-arabic);
    line-height: 1.6;
    overflow-x: hidden;
    direction: rtl;
    text-align: right;
}

/* Container */
.uizard-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

/* Main content offset for fixed header stack:
   top-bar (~55px) + 15px top offset + gap + main-header (~70px) ≈ 160px */
main {
    margin-top: 160px;
}

/* Section header */
.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--gold-primary);
}