/* -----------------------------------------------------------
   1. Variables & Reset
----------------------------------------------------------- */
:root {
    /* Colors */
    --color-bg: #050511;
    --color-bg-secondary: #0f0c29;
    --color-card-bg: rgba(255, 255, 255, 0.05);
    --color-primary: #0D072B;
    --color-secondary: #E6C286;
    --color-primary-hover: #f2c94c;
    --color-text-main: #ffffff;
    --color-text-muted: rgba(13, 7, 43, 0.7);
    --color-border: rgba(212, 175, 55, 0.3);

    /* Typography */
    --font-main: 'Vazirmatn', sans-serif;

    /* Spacing */
    --container-width: 1256px;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xlg: 10rem;

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

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: #ffffff;
    color: var(--color-text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* -----------------------------------------------------------
   2. Utilities & Components
----------------------------------------------------------- */
.container {
    width: 98%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.text-center {
    text-align: center;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.6rem 1.125rem;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
}

.btn--primary {
    background-color: #98c838; /* Greenish accent from mockup header */
    color: #fff;
    border-radius: 16px;
    padding: 10px 2.5rem;
    font-weight: 500;
}

.btn--gold {
    background: linear-gradient(45deg, #bf953f, #fcf6ba, #b38728);
    color: #000;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.btn--outline {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
}

.btn--dark {
    background-color: var(--color-primary);
    color: #ffffff;
    border: 1px solid var(--color-primary);
}

.btn--light {
    background-color: #ffffff;
    color: var(--color-primary);
}

.btn--has-icon {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    z-index: 1;
}

.btn-wrapper {
    position: relative;
}

.btn-wrapper::before {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -35px;
    bottom: -20px;
    transform: rotate(19.85deg);
    background-image: url('data:image/svg+xml,<svg width="98" height="98" viewBox="0 0 98 98" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.2" filter="url(%23filter0_f_106_1155)"><path d="M46.0805 16.4214L46.9219 40.3469L72.4371 11.2573L48.2111 41.4283L86.4613 35.54L48.5033 43.0851L81.5907 63.1533L47.6619 44.542L52.2406 60.9402L46.0805 45.1174L32.0564 81.1766L44.4991 44.542L10.5702 63.1533L43.6576 43.0851L26.3165 40.3469L43.9498 41.4283L19.7238 11.2573L45.239 40.3469L46.0805 16.4214Z" fill="%23FFE8C1"/></g><g opacity="0.6" filter="url(%23filter1_f_106_1155)"><circle cx="48.8894" cy="48.8896" r="18.9506" fill="url(%23paint0_radial_106_1155)"/></g><circle cx="55.3676" cy="73.3256" r="0.854397" fill="%230D072B"/><circle cx="67.4204" cy="70.6059" r="0.854397" fill="%230D072B"/><circle opacity="0.4" cx="49.5576" cy="61.0224" r="0.854397" fill="%230D072B"/><circle cx="54.999" cy="46.3998" r="0.854397" fill="%230D072B"/><circle cx="45.2857" cy="45.1303" r="0.341759" fill="%230D072B"/><circle cx="38.4505" cy="36.9282" r="0.341759" fill="%230D072B"/><circle opacity="0.7" cx="55.1967" cy="33.5107" r="0.341759" fill="%230D072B"/><circle cx="42.2099" cy="57.0918" r="0.341759" fill="%230D072B"/><circle cx="44.6021" cy="68.0283" r="0.341759" fill="%230D072B"/><circle cx="46.9945" cy="78.9643" r="0.341759" fill="%230D072B"/><circle opacity="0.7" cx="61.6901" cy="63.9272" r="0.341759" fill="%230D072B"/><circle cx="31.2735" cy="61.8764" r="0.341759" fill="%230D072B"/><circle opacity="0.4" cx="31.9571" cy="32.8271" r="0.341759" fill="%230D072B"/><circle opacity="0.4" cx="62.7154" cy="40.0039" r="0.341759" fill="%230D072B"/><circle cx="24.7801" cy="21.8906" r="0.341759" fill="%230D072B"/><circle opacity="0.4" cx="21.3626" cy="59.8261" r="0.341759" fill="%230D072B"/><circle opacity="0.7" cx="39.4758" cy="73.4965" r="0.341759" fill="%230D072B"/><circle cx="76.3858" cy="48.8896" r="0.341759" fill="%230D072B"/><circle opacity="0.7" cx="38.2796" cy="52.8197" r="0.854397" fill="%230D072B"/><circle cx="62.2027" cy="27.1879" r="0.854397" fill="%230D072B"/><circle opacity="0.4" cx="38.2796" cy="19.3275" r="0.854397" fill="%230D072B"/><circle cx="69.0379" cy="47.352" r="0.854397" fill="%230D072B"/><circle cx="25.2928" cy="48.3769" r="0.854397" fill="%230D072B"/><defs><filter id="filter0_f_106_1155" x="5.84255" y="6.52968" width="85.3463" height="79.3747" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.36382" result="effect1_foregroundBlur_106_1155"/></filter><filter id="filter1_f_106_1155" x="-5.72205e-06" y="0.000177383" width="97.7788" height="97.7789" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="14.9694" result="effect1_foregroundBlur_106_1155"/></filter><radialGradient id="paint0_radial_106_1155" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.8894 48.8896) rotate(90) scale(18.9506)"><stop offset="0.685" stop-color="%23E6C286"/><stop offset="1" stop-color="%23B48F4F"/></radialGradient></defs></svg>');
    background-repeat: no-repeat;
    user-select: none;
    pointer-events: none;
}

.btn-wrapper::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    left: -45px;
    top: -30px;
    background-image: url('data:image/svg+xml,<svg width="98" height="98" viewBox="0 0 98 98" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.2" filter="url(%23filter0_f_106_1155)"><path d="M46.0805 16.4214L46.9219 40.3469L72.4371 11.2573L48.2111 41.4283L86.4613 35.54L48.5033 43.0851L81.5907 63.1533L47.6619 44.542L52.2406 60.9402L46.0805 45.1174L32.0564 81.1766L44.4991 44.542L10.5702 63.1533L43.6576 43.0851L26.3165 40.3469L43.9498 41.4283L19.7238 11.2573L45.239 40.3469L46.0805 16.4214Z" fill="%23FFE8C1"/></g><g opacity="0.6" filter="url(%23filter1_f_106_1155)"><circle cx="48.8894" cy="48.8896" r="18.9506" fill="url(%23paint0_radial_106_1155)"/></g><circle cx="55.3676" cy="73.3256" r="0.854397" fill="%230D072B"/><circle cx="67.4204" cy="70.6059" r="0.854397" fill="%230D072B"/><circle opacity="0.4" cx="49.5576" cy="61.0224" r="0.854397" fill="%230D072B"/><circle cx="54.999" cy="46.3998" r="0.854397" fill="%230D072B"/><circle cx="45.2857" cy="45.1303" r="0.341759" fill="%230D072B"/><circle cx="38.4505" cy="36.9282" r="0.341759" fill="%230D072B"/><circle opacity="0.7" cx="55.1967" cy="33.5107" r="0.341759" fill="%230D072B"/><circle cx="42.2099" cy="57.0918" r="0.341759" fill="%230D072B"/><circle cx="44.6021" cy="68.0283" r="0.341759" fill="%230D072B"/><circle cx="46.9945" cy="78.9643" r="0.341759" fill="%230D072B"/><circle opacity="0.7" cx="61.6901" cy="63.9272" r="0.341759" fill="%230D072B"/><circle cx="31.2735" cy="61.8764" r="0.341759" fill="%230D072B"/><circle opacity="0.4" cx="31.9571" cy="32.8271" r="0.341759" fill="%230D072B"/><circle opacity="0.4" cx="62.7154" cy="40.0039" r="0.341759" fill="%230D072B"/><circle cx="24.7801" cy="21.8906" r="0.341759" fill="%230D072B"/><circle opacity="0.4" cx="21.3626" cy="59.8261" r="0.341759" fill="%230D072B"/><circle opacity="0.7" cx="39.4758" cy="73.4965" r="0.341759" fill="%230D072B"/><circle cx="76.3858" cy="48.8896" r="0.341759" fill="%230D072B"/><circle opacity="0.7" cx="38.2796" cy="52.8197" r="0.854397" fill="%230D072B"/><circle cx="62.2027" cy="27.1879" r="0.854397" fill="%230D072B"/><circle opacity="0.4" cx="38.2796" cy="19.3275" r="0.854397" fill="%230D072B"/><circle cx="69.0379" cy="47.352" r="0.854397" fill="%230D072B"/><circle cx="25.2928" cy="48.3769" r="0.854397" fill="%230D072B"/><defs><filter id="filter0_f_106_1155" x="5.84255" y="6.52968" width="85.3463" height="79.3747" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.36382" result="effect1_foregroundBlur_106_1155"/></filter><filter id="filter1_f_106_1155" x="-5.72205e-06" y="0.000177383" width="97.7788" height="97.7789" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="14.9694" result="effect1_foregroundBlur_106_1155"/></filter><radialGradient id="paint0_radial_106_1155" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.8894 48.8896) rotate(90) scale(18.9506)"><stop offset="0.685" stop-color="%23E6C286"/><stop offset="1" stop-color="%23B48F4F"/></radialGradient></defs></svg>');
    background-repeat: no-repeat;
}

.btn-wrapper--light::before {
    background-image: url('data:image/svg+xml,<svg width="98" height="99" viewBox="0 0 98 99" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.2" filter="url(%23filter0_f_103_4617)"><path d="M57.2774 18.5343L49.9448 41.324L83.8216 22.6266L50.7902 42.7789L88.7672 50.2285L50.5025 44.4365L74.8098 74.5474L49.2163 45.5212L47.955 62.4998L47.5335 45.5254L22.0986 74.6802L46.2414 44.4472L8.00885 50.4321L45.9447 42.7911L30.5637 34.3274L46.7821 41.332L34.2401 4.72753L48.3619 40.7526L57.2774 18.5343Z" fill="%23FFE8C1"/></g><g opacity="0.6" filter="url(%23filter1_f_103_4617)"><circle cx="48.8946" cy="50.0273" r="18.9506" transform="rotate(19.8497 48.8946 50.0273)" fill="url(%23paint0_radial_103_4617)"/></g><circle cx="46.6906" cy="75.2109" r="0.854397" transform="rotate(19.8497 46.6906 75.2109)" fill="white"/><circle cx="58.9509" cy="76.7454" r="0.854397" transform="rotate(19.8497 58.9509 76.7454)" fill="white"/><circle opacity="0.4" cx="45.4037" cy="61.666" r="0.854397" transform="rotate(19.8497 45.4037 61.666)" fill="white"/><circle cx="55.4867" cy="49.76" r="0.854397" transform="rotate(19.8497 55.4867 49.76)" fill="white"/><circle cx="46.7815" cy="45.2678" r="0.341759" transform="rotate(19.8497 46.7815 45.2678)" fill="white"/><circle cx="43.1375" cy="35.2319" r="0.341759" transform="rotate(19.8497 43.1375 35.2319)" fill="white"/><circle opacity="0.7" cx="60.0493" cy="37.7036" r="0.341759" transform="rotate(19.8497 60.0493 37.7036)" fill="white"/><circle cx="39.8269" cy="55.4741" r="0.341759" transform="rotate(19.8497 39.8269 55.4741)" fill="white"/><circle cx="38.3636" cy="66.573" r="0.341759" transform="rotate(19.8497 38.3636 66.573)" fill="white"/><circle cx="36.9002" cy="77.6719" r="0.341759" transform="rotate(19.8497 36.9002 77.6719)" fill="white"/><circle opacity="0.7" cx="55.8288" cy="68.5178" r="0.341759" transform="rotate(19.8497 55.8288 68.5178)" fill="white"/><circle cx="27.9157" cy="56.2612" r="0.341759" transform="rotate(19.8497 27.9157 56.2612)" fill="white"/><circle opacity="0.4" cx="38.4224" cy="29.1697" r="0.341759" transform="rotate(19.8497 38.4224 29.1697)" fill="white"/><circle opacity="0.4" cx="64.9163" cy="46.3643" r="0.341759" transform="rotate(19.8497 64.9163 46.3643)" fill="white"/><circle cx="35.3855" cy="16.446" r="0.341759" transform="rotate(19.8497 35.3855 16.446)" fill="white"/><circle opacity="0.4" cx="19.2899" cy="50.967" r="0.341759" transform="rotate(19.8497 19.2899 50.967)" fill="white"/><circle opacity="0.7" cx="31.685" cy="69.9756" r="0.341759" transform="rotate(19.8497 31.685 69.9756)" fill="white"/><circle cx="74.7573" cy="59.364" r="0.341759" transform="rotate(19.8497 74.7573 59.364)" fill="white"/><circle opacity="0.7" cx="37.5808" cy="50.1213" r="0.854397" transform="rotate(19.8497 37.5808 50.1213)" fill="white"/><circle cx="68.786" cy="34.1357" r="0.854397" transform="rotate(19.8497 68.786 34.1357)" fill="white"/><circle opacity="0.4" cx="48.9532" cy="18.6191" r="0.854397" transform="rotate(19.8497 48.9532 18.6191)" fill="white"/><circle cx="68.3683" cy="55.4224" r="0.854397" transform="rotate(19.8497 68.3683 55.4224)" fill="white"/><circle cx="26.874" cy="41.533" r="0.854397" transform="rotate(19.8497 26.874 41.533)" fill="white"/><defs><filter id="filter0_f_103_4617" x="3.28115" y="-0.000100613" width="90.2137" height="79.4079" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.36382" result="effect1_foregroundBlur_103_4617"/></filter><filter id="filter1_f_103_4617" x="5.53131e-05" y="1.13275" width="97.7891" height="97.7892" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="14.9694" result="effect1_foregroundBlur_103_4617"/></filter><radialGradient id="paint0_radial_103_4617" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.8946 50.0273) rotate(90) scale(18.9506)"><stop offset="0.685" stop-color="%23E6C286"/><stop offset="1" stop-color="%23B48F4F"/></radialGradient></defs></svg>');
}

.btn-wrapper--light::after {
    background-image: url('data:image/svg+xml,<svg width="98" height="98" viewBox="0 0 98 98" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.2" filter="url(%23filter0_f_103_4589)"><path d="M46.0805 16.4209L46.9219 40.3464L72.4371 11.2568L48.2111 41.4278L86.4613 35.5396L48.5033 43.0846L81.5907 63.1528L47.6619 44.5415L52.2406 60.9397L46.0805 45.1169L32.0564 81.1761L44.4991 44.5415L10.5702 63.1528L43.6576 43.0846L26.3165 40.3464L43.9498 41.4278L19.7238 11.2568L45.239 40.3464L46.0805 16.4209Z" fill="%23FFE8C1"/></g><g opacity="0.6" filter="url(%23filter1_f_103_4589)"><circle cx="48.8894" cy="48.8893" r="18.9506" fill="url(%23paint0_radial_103_4589)"/></g><circle cx="55.3676" cy="73.3251" r="0.854397" fill="white"/><circle cx="67.4204" cy="70.6051" r="0.854397" fill="white"/><circle opacity="0.4" cx="49.5576" cy="61.0216" r="0.854397" fill="white"/><circle cx="54.999" cy="46.3993" r="0.854397" fill="white"/><circle cx="45.2857" cy="45.1298" r="0.341759" fill="white"/><circle cx="38.4505" cy="36.9277" r="0.341759" fill="white"/><circle opacity="0.7" cx="55.1967" cy="33.51" r="0.341759" fill="white"/><circle cx="42.2099" cy="57.0915" r="0.341759" fill="white"/><circle cx="44.6021" cy="68.0278" r="0.341759" fill="white"/><circle cx="46.9945" cy="78.9641" r="0.341759" fill="white"/><circle opacity="0.7" cx="61.6901" cy="63.9267" r="0.341759" fill="white"/><circle cx="31.2735" cy="61.8762" r="0.341759" fill="white"/><circle opacity="0.4" cx="31.9571" cy="32.8266" r="0.341759" fill="white"/><circle opacity="0.4" cx="62.7154" cy="40.0034" r="0.341759" fill="white"/><circle cx="24.7801" cy="21.8903" r="0.341759" fill="white"/><circle opacity="0.4" cx="21.3626" cy="59.8254" r="0.341759" fill="white"/><circle opacity="0.7" cx="39.4758" cy="73.4958" r="0.341759" fill="white"/><circle cx="76.3858" cy="48.8891" r="0.341759" fill="white"/><circle opacity="0.7" cx="38.2796" cy="52.8192" r="0.854397" fill="white"/><circle cx="62.2027" cy="27.1876" r="0.854397" fill="white"/><circle opacity="0.4" cx="38.2796" cy="19.3271" r="0.854397" fill="white"/><circle cx="69.0379" cy="47.3512" r="0.854397" fill="white"/><circle cx="25.2928" cy="48.3766" r="0.854397" fill="white"/><defs><filter id="filter0_f_103_4589" x="5.84255" y="6.5292" width="85.3463" height="79.3745" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="2.36382" result="effect1_foregroundBlur_103_4589"/></filter><filter id="filter1_f_103_4589" x="-5.72205e-06" y="-6.67572e-05" width="97.7788" height="97.7787" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="14.9694" result="effect1_foregroundBlur_103_4589"/></filter><radialGradient id="paint0_radial_103_4589" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(48.8894 48.8893) rotate(90) scale(18.9506)"><stop offset="0.685" stop-color="%23E6C286"/><stop offset="1" stop-color="%23B48F4F"/></radialGradient></defs></svg>');

}


.btn-hint {
    width: 34px;
    height: 34px;
    background-color: var(--color-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn--full {
    width: 100%;
    display: block;
}

.btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Typography Helpers */
.section-title {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: #fff;
}

.text-body {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

/* -----------------------------------------------------------
   3. Header
----------------------------------------------------------- */
.header {
    padding: 2rem 0;
    background: #05030b;

}

.header__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header__nav {
    display: none; /* Hidden on mobile */
}

.header__hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    left: 1.5rem;
}

.header__hamburger span {
    width: 25px;
    height: 3px;
    background-color: var(--color-secondary);
    border-radius: 2px;
}

/* Mobile Menu Active State */
.header__nav.active {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-bg-secondary);
    padding: 1rem;
    text-align: center;
}

.header__menu li {
    margin: 1rem 0;
}

.header__link {
    font-weight: 600;
}

.header__link:hover {
    color: var(--color-secondary);
}

/* -----------------------------------------------------------
   4. Hero Section
----------------------------------------------------------- */
.hero {
    position: relative;
    overflow: hidden;
    background-color: #000000;
}

.hero::before {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    height: 84px;
    bottom: 0;
    background: linear-gradient(0deg, #000000 6.31%, rgba(9, 7, 23, 0) 93.18%);
}

.hero::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    height: 84px;
    top: 0;
    background: linear-gradient(180deg, #000000 6.31%, rgba(9, 7, 23, 0) 93.18%);
}

.hero .btn-wrapper {
    display: inline-block;
}

.hero__container {
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;
    background-image: url("images/bg-7.png");
    background-repeat: no-repeat;
    background-position: -250px center;
    background-size: cover;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.hero__title {
    font-size: 2.4rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.hero__subtitle {
    margin-bottom: 1.5rem;
    display: flex;
    gap: 28px;
    align-items: center;
}

.hero__desc {
    color: #7F7B9B;
    margin-bottom: 40px;
    margin-top: 1.5rem;
    font-size: 20px;
    font-weight: 400;
    max-width: 545px;
}

.hero__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero__subtitle-divider {
    width: 3px;
    height: 26px;
    background-color: #E6C286;
    display: inline-block;
}

.hero__subtitle-item {
    font-weight: 500;
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 0;
}

.hero__plan {
    position: relative;
}

.hero__date {
    position: absolute;
    color: #E6C286;
    font-size: 32px;
    font-weight: 400;
    right: 335px;
}

.hero__hint {
    position: absolute;
    right: 490px;
    font-size: 15px;
    font-weight: bold;
    top: -12px;
    color: #E6C286;
}

/* -----------------------------------------------------------
   5. About Section
----------------------------------------------------------- */
.about {
    background-color: #05030b;
    margin-bottom: 90px;
    padding-top: 116px;
    padding-bottom: 98px;
}

.about__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 88px;
}

.about__title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 30px;
}

.about__subtitle {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: #FFFFFFC4;
}

.about__subtitle strong {
    color: var(--color-secondary);
}

.about__list li {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: #FFFFFFC4;
}

.about__list li:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 0.5rem;
    position: relative;
    top: 2px;
    background-color: var(--color-secondary);
}


.about .btn-wrapper {
    display: inline-block;
    margin-top: 30px;
}

.about__plan {
    position: relative;
}


/* -----------------------------------------------------------
   6. Prizes Section
----------------------------------------------------------- */
.prizes {
    padding-bottom: var(--spacing-xlg);
}

.prizes__wrapper {
    position: relative;
    background-color: var(--color-primary);
    padding: 75px 100px 65px;
    border-radius: 36px;
    background-image: url("images/pattern-3.png");
}

.prizes__title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 18px;
    text-align: center;
}

.prizes__subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 50px;
    margin-top: -20px;
    text-align: center;
}

.prizes__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.prizes__actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.prize-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2rem;
    border-radius: 24px;
}

.prize-card .btn-wrapper {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}

.prize-card__title {
    color: var(--color-secondary);
    margin-bottom: 1rem;
    font-size: 24px;
    font-weight: bold;
}

.prize-card__desc {
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.prize-card__info {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.prize-card__info strong {
    color: var(--color-secondary);
}

.prize-card__actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}

.prize-card__actions > .btn-wrapper {
    width: 100%;
}

.prize-card__info + span {
    margin-bottom: 8px;
    display: inline-block;
}

.prize-card__list {
    margin-bottom: 1rem;
}

.prize-card__list li {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0.5rem;
    color: #FFFFFFC4;
}

.prize-card__list li:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 0.5rem;
    position: relative;
    top: 2px;
    background-color: var(--color-secondary);
}

/* -----------------------------------------------------------
   7. Features Section
----------------------------------------------------------- */
.features {
    padding-bottom: 30px;
}

.features__container {
    display: flex;
    justify-content: space-between;
    gap: 96px;
}

.features__title {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.3;
    margin-bottom: 1rem;
}


.features__list {
    font-size: 16px;
    font-weight: 400;
    color: rgba(13, 7, 43, 0.8);
}

.features__list li::before {
    content: "-";
    margin-left: 4px;
}

.features__subtitle {
    font-size: 20px;
    font-weight: 400;
    color: rgba(13, 7, 43, 0.8);
    text-align: justify;
    margin-bottom: 0;
}

.features__subtitle-bold {
    margin-top: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
    align-items: center;
}

.feature-item {
    max-width: 370px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 1.25rem;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.67) 0%, rgba(255, 250, 241, 0.67) 100%);
    border: 1px solid rgba(230, 194, 134, 0.2);
    backdrop-filter: blur(25px);
}

.feature-item h4 {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 22px;
}

.feature-item p {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 14px;
}

.alert {
    position: relative;
    top: -50px;
    background-color: #FEFCE8;
    padding: 2rem;
    border-right: 4px solid #E6C286;
    border-radius: 16px;
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 400;
}

.alert > span {
    color: #E6C286;
}

/* -----------------------------------------------------------
   8. Rewards Section
----------------------------------------------------------- */
.rewards {
    padding-bottom: var(--spacing-xlg);
}

.rewards__wrapper {
    position: relative;
    padding: 56px;
    background-color: var(--color-primary);
    border-radius: 36px;
    background-image: url("images/pattern-2.png");
    overflow: hidden;
}

.rewards__icon {
    position: absolute;
    top: 0;
    opacity: 0.63;
}

.rewards__icon--left {
    left: 100px;
}

.rewards__icon--right {
    right: 100px;
}

.rewards__title {
    font-size: 48px;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.rewards__subtitle {
    font-size: 30px;
    font-weight: 400;
    color: var(--color-secondary);
    margin-bottom: 1.5rem;
}

.rewards__intro {
    width: 100%;
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

.rewards__desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    margin-bottom: 1rem;
}

.rewards__table {
    max-width: 768px;
    margin: 1.5rem auto 0;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 24px;
    overflow: hidden;
    border-top: 1px solid #FFFFFF1A;
}

.rewards__action {
    width: 100%;
    max-width: 280px;
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
}

.rewards__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 24px;
}

.rewards__row:last-child {
    border-bottom: none;
}

.rewards__row--header {
    background: #1D173B !important;
    font-weight: 700;
    color: var(--color-secondary);
    font-size: 20px;
    min-height: 76px;
}

.rewards__table .rewards__row:nth-child(even) {
    background-color: #342a45;
}

.rewards__table .rewards__row:nth-child(odd) {
    background-color: #2a2546;
}

.rewards__row--gold span:last-child,
.rewards__row--silver span:last-child,
.rewards__row--bronze span:last-child {
    font-size: 30px;
    color: var(--color-secondary);
    font-weight: 700;
}

.rewards__row--other {
    font-size: 24px;
    color: var(--color-secondary);
    font-weight: 700;
}

.rewards__label {
    font-size: 24px !important;
    color: #ffffff !important;
}

.rewards__label--smaller {
    font-size: 20px !important;
}

.rewards__item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* -----------------------------------------------------------
   9. Roadmap Section
----------------------------------------------------------- */
.roadmap {
    padding-bottom: var(--spacing-xlg);
}

.roadmap__title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
    text-align: center;
}

.roadmap__subtitle {
    font-size: 24px;
    margin-bottom: 92px;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
}

.steps__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 5rem;
}

.steps__title {
    width: 100%;
    max-width: 660px;
    flex-shrink: 0;
    text-align: left !important;
}

.steps__description {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.steps__subtitle {
    color: #525252;
    font-weight: 400;
    width: 100%;
    max-width: 540px;
    margin-bottom: 0;
}

.steps__link {
    font-family: "ClashDisplay", sans-serif;
}

.steps__link svg {
    margin-left: 1.5rem;
}

.steps__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.steps__box {
    position: relative;
}

.steps__box a {
    width: 220px;
    margin-top: 1rem;
}

.steps__box-background {
    position: absolute;
}

.steps__box-background--type-1 {
    width: 335px;
    height: 172px;
    background: conic-gradient(from 187.27deg at 40.63% 50.41%, rgba(159, 115, 241, 0) -48.92deg, rgba(242, 98, 181, 0) 125.18deg, #5FC5FF 193.41deg, #FFAC89 216.02deg, #8155FF 236.07deg, #789DFF 259.95deg, rgba(159, 115, 241, 0) 311.08deg, rgba(242, 98, 181, 0) 485.18deg);
    opacity: 0.6;
    filter: blur(20px);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0.23px;
    border-radius: 10px;
    z-index: 0;
}

.steps__box-background--type-2 {
    width: 331px;
    height: 166px;
    left: 49px;
    right: -30px;
    top: 3px;
    bottom: 4px;
    background: conic-gradient(from 187.27deg at 40.63% 50.41%, rgba(159, 115, 241, 0) -48.92deg, rgba(242, 98, 181, 0) 125.18deg, #5FC5FF 193.41deg, #FFAC89 216.02deg, #8155FF 236.07deg, #789DFF 259.95deg, rgba(159, 115, 241, 0) 311.08deg, rgba(242, 98, 181, 0) 485.18deg);
    filter: blur(20px);
    border-radius: 10px;
    transform: rotate(180deg);
    z-index: 0;
}

.steps__box-background--type-3 {
    width: 346px;
    height: 166px;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0.23px;
    background: conic-gradient(from 187.27deg at 40.63% 50.41%, rgba(159, 115, 241, 0) -48.92deg, rgba(242, 98, 181, 0) 125.18deg, #5FC5FF 193.41deg, #FFAC89 216.02deg, #8155FF 236.07deg, #789DFF 259.95deg, rgba(159, 115, 241, 0) 311.08deg, rgba(242, 98, 181, 0) 485.18deg);
    opacity: 0.7;
    filter: blur(20px);
    border-radius: 10px;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    z-index: 0;
}

.steps__content {
    position: relative;
    width: 330px;
    max-width: 335px;
    min-height: 280px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.25rem;
    background: linear-gradient(109.51deg, rgba(241, 241, 241, 0.9) 2.99%, rgba(241, 241, 241, 0.6) 98.27%);
    overflow: hidden;
    border: 1px solid #fff;
}

.steps__heading {
    font-size: 32px;
    color: #000;
    font-weight: 500;
    letter-spacing: -0.05em;
    text-align: center;
}

.steps__subheading {
    color: #a1a1a1;
    font-size: 14px;
    margin-bottom: 0;
    font-weight: 200;
    text-align: center;
}

.roadmap__steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
}

.roadmap__card {
    background: #fff;
    color: #000;
    padding: 1.5rem;
    border-radius: 15px;
    text-align: center;
    position: relative;
    width: 100%;
    max-width: 300px;
}

.roadmap__number {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
}

.roadmap__arrow {
    font-size: 2rem;
    color: var(--color-text-muted);
    transform: rotate(90deg); /* Point down on mobile */
}

@media only screen and (max-width: 1199px) {

    .steps__header {
        flex-direction: column;
        margin-bottom: 40px;
    }

    .steps__title {
        text-align: center !important;
    }

    .steps__link {
        display: none;
    }

    .steps__body {
        flex-direction: column;
        gap: 1.5rem;
    }

    .steps__body > svg {
        transform: rotate(270deg);
    }

    .steps__box-background--type-1,
    .steps__box-background--type-2,
    .steps__box-background--type-3 {
        width: 100%;
    }

    .steps__box-background--type-2 {
        left: 0;
    }
}

/* -----------------------------------------------------------
   10. Final CTA & Footer
----------------------------------------------------------- */

.final-cta__card {
    padding: 80px 196px;
    border-radius: 36px;
    text-align: center;
    background-image: url("images/pattern-4.png");
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 35px;
}

.final-cta__title {
    font-size: 30px;
    font-weight: 500;
    color: var(--color-primary);
}

.final-cta__subtitle {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.rewards-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    transition: all 0.3s ease;
    margin-bottom: 2rem;
}

.rewards-grid img {
    display: block;
    width: 80px;
    max-width: 100%;
}

.legal-footer {
    width: 100%;
    padding: 2rem 1.5rem;
    margin-top: 120px;
    background-color: #05030b;
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.legal-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.85rem; /* Increased from 0.75rem */
    color: #9ca3af;
    direction: ltr;
    font-family: sans-serif;
    line-height: 1.6;
}

.elementor-icon {
    border-radius: 15px;
    border: 1px solid #fff;
    display: inline-block;
    padding: 6px;
}

.elementor-icon i, .elementor-icon svg {
    width: 1em;
    height: 1em;
    position: relative;
    display: block;
    fill: #FFFFFF;
}

.elementor-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
}

/*
.footer {
    margin-top: 220px;
    background: var(--color-primary);
    min-height: 92px;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    font-size: 18px;
    color: var(--color-secondary);
}

.footer__copy {
    text-align: center;
}
*/

/* -----------------------------------------------------------
   FAQ Section Styles
----------------------------------------------------------- */
.faq {
    margin-top: var(--spacing-xlg);
    padding: var(--spacing-lg) 0;
    background-color: var(--color-bg);
}

.faq__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}

.faq__card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    transition: var(--transition);
}

.faq__card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(230, 194, 134, 0.3);
    transform: translateY(-5px);
}

.faq__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(230, 194, 134, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.faq__question {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
}

.faq__answer {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    margin: 0;
}

@media (min-width: 768px) {
    .faq__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -----------------------------------------------------------
   Terms Section Styles
----------------------------------------------------------- */
.terms {
    padding-top: var(--spacing-xlg);
}

.terms__wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    background-color: var(--color-bg-secondary);
    background-image: linear-gradient(rgba(15, 12, 41, 0.9), rgba(15, 12, 41, 0.9)), url("images/pattern-3.png"); /* Assuming you have this pattern from previous sections */
    background-size: cover;
    padding: 1.8rem;
    border-radius: 36px;
    border: 1px solid rgba(212, 175, 55, 0.15); /* Gold border low opacity */
    margin: 0 auto;
    overflow: hidden;
}

.terms__image {
    flex: 1 0 344px;
    max-width: 344px;
}

.terms__image > img {
    border-radius: 36px;
}

/* Optional: Add a glow effect behind */
.terms__wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(230, 194, 134, 0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.terms__title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-secondary);
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.terms__subtitle {
    font-size: 1.125rem;
    color: #fff;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.terms__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px 3rem;
    position: relative;
    z-index: 1;
    text-align: right;
}

.terms__list li {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px; /* Constraints width for 2-column look */
}

/* Custom Bullet Point */
.terms__list li::before {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background-color: var(--color-secondary);
    border-radius: 2px;
    transform: rotate(45deg); /* Diamond shape bullet */
    margin-left: 1rem;
    box-shadow: 0 0 10px rgba(230, 194, 134, 0.6);
}

@media (min-width: 768px) {
    .terms__title {
        font-size: 2.5rem;
    }
}

@media (max-width: 767px) {
    .terms__wrapper {
        flex-direction: column;
        padding: 1.5rem;
    }

    .terms__title {
        text-align: center;
    }

    .terms__image {
        flex: 1 0 auto;
    }

    .terms__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .terms__list li {
        width: auto;
        max-width: 100%;
        font-size: 1rem;
    }
}

@media (max-width: 1365px) {
    .final-cta__card {
        padding: 4rem;
    }
}

@media (max-width: 767px) {
    .footer__copy {
        font-size: 14px;
    }

    .final-cta__card {
        padding: 2rem;
        gap: 1rem;
    }

    .final-cta__title {
        font-size: 22px;
    }

    .final-cta__subtitle {
        font-size: 18px;
    }

    .footer {
        margin-top: 4rem;
    }
}

/* -----------------------------------------------------------
Mobile Menu
----------------------------------------------------------- */

.header__nav {
    display: block;
    padding: 10px 40px;
    background: rgba(35, 25, 82, 0.1);
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* -----------------------------------------------------------
   11. Responsive Design (Desktop Breakpoints)
----------------------------------------------------------- */
@media (min-width: 1024px) {
    .about__container {
        flex-direction: row;
        align-items: center;
    }

    .header__hamburger {
        display: none;
    }
}


@media (min-width: 768px) {
    .section-title {
        font-size: 2.5rem;
    }

    .header__menu {
        display: flex;
        gap: 2rem;
    }

    .header__menu li {
        margin: 0;
    }

    /* Hero */
    .hero__container {
        flex-direction: row;
        align-items: center;
        text-align: right;
    }

    .hero__content {
        flex: 1;
        position: relative;
        z-index: 1;
    }

    .hero__visual {
        flex: 1;
    }

    .hero__title {
        font-size: 4rem;
    }

    .about__visual {
        flex: 1 1 478px;
        max-width: 478px;
    }

    .about__content {
        flex: 1;
    }

    /* Prizes */
    .prizes__grid {
        grid-template-columns: 1fr 1fr;
    }

    .features__content {
        flex: 1 1 750px;
        max-width: 750px;
    }

    .features__visual {
        flex: 1;
    }

    .feature-list {
        position: relative;
        top: -80px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Roadmap */
    .roadmap__steps {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    .roadmap__arrow {
        transform: rotate(0deg); /* Point left in RTL */
        margin-top: 3rem;
    }
}

@media (max-width: 1199px) {
    .feature-list {
        position: static;
        padding-right: 0;
        padding-left: 0;
    }

    .alert {
        position: static;
        margin-top: 2rem;
    }

    .features__content {
        flex: 1 1 500px;
        max-width: 500px;
    }

    .features__title {
        font-size: 32px !important;
        text-align: center;
    }

    .features__subtitle {
        font-size: 16px;
    }

    .features__visual {
        max-width: 300px;
    }

    .prizes__wrapper {
        padding: 4rem;
    }

    .prizes__heading {
        padding-right: 0;
        flex-direction: column;
    }

    .hero {
        height: auto;
    }

    .hero::before {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(2px);
        height: 100%;
    }

    .hero__hint,
    .hero__date {
        position: static;
        font-size: 24px;
    }

    .hero__container {
        background-position: 25% center;
        padding-top: 3rem;
        padding-bottom: 0rem;
    }
}

@media (max-width: 767px) {
    .about__container {
        gap: 1.5rem;
    }

    .hero__subtitle + svg {
        display: none;
    }

    .hero__subtitle,
    .hero__desc {
        position: relative;
        z-index: 1;
    }

    .hero__subtitle-divider {
        display: none;
    }

    .hero__subtitle {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 3rem;
    }

    .hero__subtitle-item {
        font-size: 18px;
    }

    .hero__desc {
        color: #ffffff;
        font-size: 18px;
        margin-bottom: 2rem;
    }


    .hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero__actions .btn-wrapper {
        width: 100%;
        max-width: 252px;
        margin-left: auto;
        margin-right: auto;
    }

    .btn-wrapper::after,
    .btn-wrapper::before {
        display: none;
    }

    .prizes,
    .rewards,
    .roadmap {
        padding-bottom: 4rem;
    }

    .faq {
        margin-top: 4rem;
    }

    .terms {
        padding-top: 4rem;
    }

    .faq__card {
        padding: 1rem;
    }

    .roadmap__title {
        font-size: 36px;
        margin-bottom: 3rem;
    }

    .steps__content {
        max-width: 300px;
    }

    .steps__heading {
        font-size: 32px;
    }

    .rewards__icon--right {
        right: 5%;
    }

    .rewards__icon--left {
        left: 5%;
    }

    .rewards__wrapper {
        padding: 24px;
        padding-top: 100px;
    }

    .rewards__title {
        font-size: 32px;
        margin-bottom: 1rem;
    }

    .rewards__subtitle {
        font-size: 24px;
        margin-bottom: 1rem;
    }

    .rewards__desc {
        font-size: 18px;
    }

    .rewards__row {
        padding: 0.5rem;
    }

    .rewards__label {
        font-size: 18px !important;
    }

    .rewards__item {
        gap: 4px;
    }

    .rewards__row--other,
    .rewards__row--gold span:last-child, .rewards__row--silver span:last-child, .rewards__row--bronze span:last-child {
        font-size: 18px;
    }

    .features__container {
        flex-direction: column-reverse;
        align-items: center;
        gap: 1.5rem;
    }

    .features__content {
        flex: 0;
    }

    .prizes__wrapper {
        padding: 2rem;
    }

    .prizes__title {
        font-size: 24px;
    }

    .prizes__subtitle {
        font-size: 18px;
    }

    .about__title {
        font-size: 32px;
    }

    .about__subtitle {
        font-size: 16px;
        text-align: justify;
    }
}

@media (max-width: 1023px) {
    .header__cta {
        margin-left: 3rem;
    }

    .header__cta > .btn.btn--primary {
        padding: 10px 2rem;
        font-size: 14px;
    }

    .header__brand {
        position: relative;
        top: 5px;
    }

    /* Mobile Menu Overlay */
    .header__nav {
        position: fixed;
        top: 0;
        right: -100%; /* Hidden by default */
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98); /* Clean white background */
        display: flex;
        justify-content: center;
        align-items: center;
        transition: right 0.4s cubic-bezier(0.77,0.2,0.05,1.0);
        z-index: 999;
        border-radius: 0;
    }

    .header__hamburger {
        position: absolute;
        z-index: 2000;
        left: 1.5rem;
    }


    /* When the menu is open */
    .header__nav.is-active {
        right: 0;
    }

    .header__menu {
        list-style: none;
        padding: 0;
        text-align: center;
    }

    .header__menu li {
        margin: 25px 0;
    }

    .header__link {
        font-size: 1.5rem;
        font-weight: bold;
        color: #B18C4C; /* Using your gold/bronze color */
        text-decoration: none;
        transition: color 0.3s;
    }

    /* Animate to "X" */
    .header__hamburger.is-active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .header__hamburger.is-active span:nth-child(2) {
        opacity: 0;
    }
    .header__hamburger.is-active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

}

@media (min-width: 576px) {
    .hero__title-mobile {
        display: none;
    }
}

@media (max-width: 575px) {
    .prizes__wrapper {
        padding: 0.5rem;
        padding-top: 2rem;
    }

    .prizes__subtitle {
        margin-bottom: 1rem;
    }

    .prize-card {
        padding: 1.2rem;
    }

    /* New Mobile Styles */
    .hero__title {
        display: none;
    }

    .hero__title-mobile {
        font-size: 3.9rem;
        font-weight: 900;
        margin-top: 0.25rem;
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }

    .header {
        padding-top: 1.7rem;
        padding-bottom: 1.7rem;
    }

    .hero::after {
        height: 60px;
    }

    .hero__plan {
        text-align: center;
    }

    .hero__date {
        font-size: 22px;
        margin-bottom: 1rem;
    }

    .hero__subtitle {
        align-items: center;
        margin-bottom: 2rem;
    }

    .hero__subtitle-item {
        font-weight: bold;
        color: #E6C286;
    }

    .hero__desc {
        text-align: center;
        font-size: 16px;
        margin-top: 0;
        margin-bottom: 0.5rem;
        padding-left: 0.5rem;
        padding-right: 1rem;
    }
}

@media (max-width: 374px) {
    .rewards__wrapper {
        padding: 16px;
        padding-top: 160px;
    }
}


/* -----------------------------------------------------------
Arabic
----------------------------------------------------------- */

html[lang="ar"] .feature-list {
    top: -70px;
}

html[lang="ar"] .alert {
    top: -40px;
}

html[lang="ar"] .features__title {
    font-size: 42px;
}

html[lang="ar"] .features__subtitle {
    font-size: 18px;
}

html[lang="ar"] .features__subtitle-bold {
    margin-top: 1rem;
}

html[lang="ar"] .prize-card .btn-wrapper {
    max-width: 310px;
}

html[lang="ar"] .hero__subtitle-item {
    font-size: 22px;
}

html[lang="ar"] .hero__desc {
    font-size: 19px;
    max-width: 620px;
}

html[lang="ar"] .hero__date {
    font-size: 19px;
    right: 455px;
}

@media (min-width: 768px) {
    .hero__title {
        font-size: 3rem;
    }
}

@media (max-width: 767px) {
    html[lang="ar"] .hero__title {
        font-size: 2.2rem;
    }
}


@media (max-width: 374px) {
    html[lang="ar"] .hero__title {
        font-size: 2rem;
    }

    .header__cta > .btn.btn--primary {
        padding: 10px 1.8rem;
    }
}