@import "variables-pc.css";
@import "invite-content.css";
@import "footer.css";

body {
    min-width: 80rem;          /* 1280px → 80rem */
    min-height: 100.1vh;
    background: #180D05;
    padding: 0;
    margin: 0;
    font-family: var(--font-family-primary);
    font-size: 1rem;           /* 16px → 1rem */
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color: var(--color-text-primary);
}

a {
    text-decoration: none;
}

.scatter-bg-wrapper {
    position: absolute;
    filter: blur(3.5rem);      /* 56px → 3.5rem */
    z-index: 3;
    width: 100%;
    height: 42rem;             /* 672px → 42rem */
    opacity: 0.4;
}

.scatter-bg {
    width: 100%;
    height: 70%;
    position: relative;
    overflow: hidden;
}

.scatter-bg::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 0;
    right: 0;
    height: 81rem;
    background-image: linear-gradient(180deg, #FFD39E 0%, #FF7D00 25%, #341b06 68%, #1e1108 100%);
    clip-path: polygon(0% 6%, 100% 6%, 70% 100%, 30% 100%);
    /* filter: blur(4rem);*/
}

.scatter-bg::after {
    content: '';
    position: absolute;
    left: 19%;
    right: 0;
    height: 36rem;
    width: 63%;
    background: radial-gradient(ellipse at 50% 100%, #1e1108 0%, #341b06 7%, #FF7D00 21%, #FFD39E 100%);
    opacity: 0.83;
}

.redeem-section {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-bottom: -20.9375rem; /* -335px → -20.9375rem */
    position: relative;
    z-index: 6;
}

.redeem-header {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 6rem;     /* 215px → 13.4375rem */
    position: relative;
    z-index: 5;
}

h1.main-title {
    font-size: 4rem;            /* 96px → 6rem */
    color: #FFFFFF;
    font-weight: 500;
    margin-bottom: 0;
    margin-top: 0;
}

.sub-title {
    background-image: linear-gradient(180deg, #FBDC96 0%, #F79A3D 100%);
    font-size: 2.625rem;        /* 42px → 2.625rem */
    white-space: nowrap;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: var(--font-weight-bold);
    text-align: center;
    position: relative;
    margin-bottom: 2.0625rem;    /* 33px → 2.0625rem */
    margin-top: 0;
}

span.sub-desc {
    font-size: 1.5rem;        /* 30px → 1.875rem */
    color: #FFFFFF;
    text-align: center;
    font-weight: 400;
    margin-bottom: 2.375rem;     /* 38px → 2.375rem */
}

.redeem-wrapper {
    position: relative;
    z-index: 5;
    width: 50%;
}
.task-header {
    margin-bottom: 1.5rem;
}
.task-item {
        padding: var(--spacing-6) var(--spacing-12);
}
.hill-scene {
    width: 100%;
    height: 40rem;              /* 640px → 40rem */
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    filter: blur(3rem);         /* 48px → 3rem */
    top: 6rem;                  /* 96px → 6rem */
}

.hill-scene img.first {
    width: 115%;
    position: absolute;
    bottom: -10%;
    left: -12%;
    opacity: 0.75;
    filter: blur(5.5rem);       /* 88px → 5.5rem */
    z-index: 5;
}

.footer {
    color: #FFFFFF;
    position: relative;
    z-index: 6;
}

.footer a {
    color: #FBA778;
}