:root {
    --color-red: #C40E26;
    --color-red-dark: #B00C22;
    --color-blue: #171C8F;
    --color-green: #23CE6B;
    --color-green-dark: #14C25D;
    --color-white: #FFFFFF;
    --color-white-80: rgba(255, 255, 255, 0.8);
    --color-white-60: rgba(255, 255, 255, 0.6);
    --color-white-40: rgba(255, 255, 255, 0.4);
    --color-dark: #010224;
    --color-yellow: #FDB601;
    --color-yellow-light: #FFCA47;
    --container-width: 90%;
    --transition-speed: 0.3s;
}

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

/* Utility - Line Breaks */
.mob-br {
    display: none;
}

html {
    /* 
    Fluid REM Logic:
    Desktop Reference: 1440px
    1rem = 16px
    Calculation: 16 / 1440 * 100 = 1.11111vw
    */
    font-size: 1.11111vw;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    line-height: 1.5;
    background-color: var(--color-white);
}

/* Container */
.container {
    width: var(--container-width);
    /* No max-width in px, or use rem if needed. 
       1200px / 16 = 75rem */
    max-width: 75rem;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Typography elements in REM */
/* Typography elements in REM */
.hero-tag {
    display: inline-block;
    background-color: var(--color-green-dark);
    color: var(--color-dark);
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.3;
    /* 18px */
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 2.25rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.hero-description {
    font-size: 1.25rem;
    /* ~20px */
    line-height: 1.5;
    margin-bottom: 2rem;
    max-width: 40rem;
    /* readable width */
}

h1 {
    /* Generic fallback or other H1s */
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 2.25rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

h2 {
    /* 32px -> 2rem */
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 4rem;
}

h3 {
    /* 24px -> 1.5rem */
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.promo-period {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-dark);
    background-color: var(--color-green-dark);
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    display: inline-block;
    margin-bottom: 1rem;
}

p,
li {
    font-size: 1rem;
    /* 16px base */
    margin-bottom: 0.5rem;
}

.text-white {
    color: var(--color-white);
}

.text-yellow {
    color: var(--color-yellow);
}

.text-black {
    color: var(--color-dark);
}

.text-center {
    text-align: center;
    padding: 0rem 10rem 0rem 10rem;
}

/* Animations */
@keyframes btn-shake {

    0%,
    88% {
        left: 0;
    }

    /* 3s Idle */
    /* Condensed shake for quicker motion */
    89% {
        left: 0.375rem;
    }

    92% {
        left: -0.375rem;
    }

    95% {
        left: 0.375rem;
    }

    98% {
        left: -0.375rem;
    }

    100% {
        left: 0;
    }
}

/* Buttons */
/* Buttons */
/* .btn styles merged into .btn-black */

.btn-black {
    /* Merged Layout Styles */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    text-decoration: none;
    position: relative;
    /* For pseudo-element */
    z-index: 1;
    /* Ensure text is above pseudo */
    overflow: hidden;
    /* optional, but good for rounded corners */

    /* Visual Styles */
    background: linear-gradient(180deg, var(--color-red) 0%, var(--color-red-dark) 100%);
    color: var(--color-white) !important;
    border: none;
    /* 1px border */
    text-shadow: none;
    text-transform: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    border-radius: 0.9375rem;
    letter-spacing: -0.02em;
    padding: 1.375rem 4rem;
    font-size: 1.375rem;
    box-shadow: 0 0.5rem 2rem rgba(196, 14, 38, 0.45);

    /* Animation shake cycle */
    animation: btn-shake 3s infinite;
    left: 0;
    /* Init relative pos */
}

.btn-black:hover {
    transform: scale(1.04);
    animation: none;
    /* Stop shake on hover */
}

.btn-black::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--color-red-dark) 0%, var(--color-red) 100%);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--transition-speed) ease;
}

.btn-black:hover::after {
    opacity: 1;
}

/* Header */
.header {
    background: transparent;
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 100;
    padding: 1.5rem 0;
}

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

.logo-img {
    width: 12.5rem;
    /* 200px */
    height: auto;
    display: block;
}

.nav {
    display: none;
    /* Logic handled in media queries */
}

.nav-link {
    color: var(--color-white) !important;
    text-decoration: none;
    margin: 0 1rem;
    font-size: 1rem;
    transition: opacity 0.3s;
}

.nav-link:hover {
    color: var(--color-green) !important;
    transition: all 0.3s ease;
}

/* Language Switcher Dropdown */
.lang-dropdown {
    position: relative;
    font-size: 1rem;
}

.lang-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* 6px */
    background: transparent;
    border: none;
    color: var(--color-white);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 1.25rem;
    /* 20px */
    transition: all 0.3s ease;
}

.lang-btn:hover {
    color: var(--color-green);
    transition: all 0.3s ease;
}

.lang-arrow {
    width: 0.625rem;
    /* 10px */
    height: 0.375rem;
    /* 6px */
    transition: transform 0.3s ease;
}

/* Open State for Button */
.lang-dropdown.open .lang-btn {
    background-color: var(--color-white);
    color: var(--color-dark);
    border-radius: 1.25rem 1.25rem 0 0;
    /* Top rounded only when open? Or keep rounded and float menu? Ref suggests separate floating pill or connected. I'll go with connected look or distinct. Ref shows "Click" has white bg. */
}

.lang-dropdown.open .lang-arrow {
    transform: rotate(180deg);
}

/* Dropdown List */
.lang-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    list-style: none;
    border-radius: 0 0 1.25rem 1.25rem;
    padding: 0.25rem 0;
    display: none;
    /* Hidden by default */
    z-index: 101;
    overflow: hidden;
}

.lang-dropdown.open .lang-list {
    display: block;
}

.lang-item {
    padding: 0.5rem 1rem;
    color: var(--color-dark);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
}

.lang-item:hover,
.lang-item.active {
    background-color: #D1D3E1;
    /* Light gray for active/default hover */
}

/* Ref style: Hover Lang -> Orange background */
.lang-item:hover {
    background: var(--color-green);
    /* Orange gradient approach to match style */
    color: var(--color-dark);
}


.section-header {
    text-align: center;
    margin-bottom: 3rem;
}



/* Countdown Timer */
.countdown-timer {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 5rem;
}

/* Keep timer centered in section headers (levels block) */
.section-header .countdown-timer {
    justify-content: center;
}

/* Reduce vertical gap when timer is inside action text block */
.action-text .countdown-timer {
    margin-bottom: 1rem;
}

.timer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timer-value {
    font-size: 3rem;
    letter-spacing: -0.04em;
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
    font-variant-numeric: tabular-nums;
    /* Monospaced numbers to prevent jumping */
}

.timer-label {
    font-size: 0.875rem;
    color: var(--color-white-80);
    margin-top: 0.1rem;
    text-transform: lowercase;
}

/* Dark variant for countdown (black text) */
.countdown-timer--dark .timer-value {
    color: var(--color-dark);
}

.countdown-timer--dark .timer-label {
    color: var(--color-dark);
}

.timer-separator {
    font-size: 3rem;
    font-weight: 700;
    line-height: 0.9;
    color: var(--color-green);
    margin: 0 0.5rem;
}

/* Blocks */
.block {
    padding: 1rem 0 12rem 0;
    position: relative;
}

/* Waves */
.wave {
    position: absolute;
    bottom: -0.0625rem;
    /* -1px */
    left: 0;
    width: 100%;
    height: auto;
    z-index: 10;
    line-height: 0;
    pointer-events: none;
}

.wave.wave-top {
    top: -0.0625rem;
    bottom: auto;
}

.wave svg {
    display: block;
    width: 100%;
    height: auto;
}

.wave img {
    display: block;
    width: 100%;
    height: auto;
}

/* Specific Block Colors */
.hero-block {
    background: linear-gradient(to right, var(--color-blue), var(--color-blue));
    color: var(--color-white);
}

.levels-block {
    background-color: var(--color-dark);
    padding-bottom: 3rem;
    z-index: 4;
}

.action-block {
    background: linear-gradient(to right, var(--color-blue), var(--color-blue));
    padding-top: 12rem;
    padding-bottom: 10rem;
    position: relative;
    overflow: visible;
}

.action-cta-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 1.5rem;
    padding: 1.5rem 1rem 0rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0rem;
    width: 100%;
    max-width: 38rem;
    margin-top: 1rem;
}

.cta-block {
    background-color: var(--color-dark);
    padding-bottom: 8rem;
    position: relative;
    overflow: hidden;
    z-index: 5;
}

.cta-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    z-index: 1;
}

/* Snow overlay */
.snow-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999;
}

.cta-parallax {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 1;
    transform: translateY(var(--scroll-shift, 0px));
    transform-origin: center top;
}

.reveal-on-scroll {
    --reveal-delay: 0ms;
    --reveal-shift: 3rem;
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    transition:
        opacity 600ms cubic-bezier(0, 0, 0, 1) var(--reveal-delay),
        transform 600ms cubic-bezier(0, 0, 0, 1) var(--reveal-delay);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* For parallax elements, drop transform transition after reveal to keep scroll smooth */
.scroll-shift.reveal-on-scroll.reveal-complete {
    transition: opacity 0ms linear 0ms, transform 0ms linear 0ms;
}

/* For non-parallax reveals, restore default transitions so hovers work normally */
.reveal-on-scroll.reveal-complete:not(.scroll-shift) {
    transform: none !important;
    transition: initial;
}

/* Compose with parallax shift when both classes present */
.scroll-shift.reveal-on-scroll {
    transform: translateY(calc(var(--scroll-shift, 0px) + var(--reveal-shift, 3rem)));
}

.scroll-shift.reveal-on-scroll.is-visible {
    transform: translateY(var(--scroll-shift, 0px));
}

.cta-wave {
    z-index: 6;
    pointer-events: none;
}

/* Lists */
.hero-features {
    list-style: none;
    max-width: 80%;
    margin-bottom: 2.75rem;
}

.action-features {
    list-style: none;
    max-width: 100%;
    margin-bottom: 2.25rem;
}

.hero-features li,
.action-features li {
    display: flex;
    align-items: center;
    /* Center vertically with large icon */
    gap: 1.5rem;
    /* Wider gap */
    margin-bottom: 2rem;
    /* Increased spacing */
    font-size: 1.125rem;
    /* Slightly larger text 18px */
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-white);
}

.hero-features strong {
    color: var(--color-green);
    font-weight: 700;
    /* Ensure it stays bold */
}

.icon-wrapper {
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.icon-base {
    width: 3rem;
    height: 3rem;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    fill: white;
    color: white;
}

/* Images & Cards */
.scroll-shift {
    --scroll-shift: 0px;
    will-change: transform;
}

.hero-santa-img {
    width: 100%;
    height: auto;
    transform: translateY(var(--scroll-shift, 0px)) scale(0.80);
    transform-origin: center top;
}

.level-card {
    background: rgba(255, 255, 255, 0.1);
    /* White with 10% opacity */
    padding: 2.5rem;
    border-radius: 1.5rem;
    /* More rounded */
    transition: transform var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left align */
    text-align: left;
    color: var(--color-white);
    /* Dark text on white card */
    position: relative;
    overflow: hidden;
}

.level-card:hover {
    transform: scale(1.04);
}

/* New CSS for Level Card internal structure */
.card-content {
    width: 100%;
}

.level-img {
    width: 100%;
    border-radius: 1rem;
    /* Full width */
    max-width: none;
    height: auto;
    object-fit: contain;
    margin-bottom: 2rem;
    /* Increase visual size by removing max-width restriction if container allows */
}

.level-title {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    line-height: 1.15;
    color: var(--color-white);
    /* White heading for contrast */
}

.level-desc {
    font-size: 1.125rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 1.5rem;
    background-color: var(--color-green-dark);
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    display: inline-block;
}

.time-desc {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-yellow-light);
    margin-top: 0.5rem;
    margin-bottom: 0rem;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    display: inline-block;
}

.level-features {
    list-style: none;
    margin-bottom: 2rem;
    width: 100%;
}

.level-features li {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.5;
}

.level-features strong {
    color: var(--color-green);
}

.action-features strong {
    color: var(--color-green);
}

.card-separator {
    display: none;
    /* Hidden on all devices */
}

.level-card .btn-black {
    width: 100%;
    /* Full width button */
}

.action-man-img {
    width: 100%;
    /* Rubber */
    max-width: 37.5rem;
    /* 600px in REM */
    height: auto;
}

/* Action block santa image - same style as hero-santa-img */
.action-santa-img {
    width: 100%;
    height: auto;
    transform: translateY(var(--scroll-shift, 0px)) scale(1);
    transform-origin: center bottom;
}

.form-wrapper {
    position: relative;
    max-width: 28rem;
    /* 600px */
    margin: 2rem auto;
    text-align: center;
}

.gift-decoration-img {
    position: absolute;
    top: -5rem;
    /* -80px */
    right: -6.25rem;
    /* -100px */
    width: 12.5rem;
    /* 200px */
    animation: float 6s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}

@keyframes float {
    0% {
        transform: translateY(0rem) rotate(0deg);
    }

    50% {
        transform: translateY(-1.25rem) rotate(5deg);
    }

    100% {
        transform: translateY(0rem) rotate(0deg);
    }
}

/* Form Styles */
.form_wrap {
    position: relative;
    z-index: 1;
    display: flex;
    width: 27.8125rem;
    margin: 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.875rem;
    border-radius: 2.25rem;
}

.form_wrap .flex-register-form,
#flexible-registration {
    width: 100% !important;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25) 100%), #dadce7;
    background-blend-mode: overlay;
}

.form_wrap .flex-register-form .flex-container {
    padding: 2.81rem 2.5rem 3.75rem !important;
}


.flex-register-form .flex-container .field {
	padding-bottom: 0.625rem !important;
	padding-top: 0.625rem !important;

	opacity: 1;
	position: relative;
}


.form_wrap .flex-register-form .flex-container .field .input input {
	padding: 0.938rem 1.25rem !important;
	height: 3.75rem !important;
	font-size: 1.25rem !important;

	border: 0.07rem solid #cad4e5 !important;
	border-radius: 2.5rem !important;
}



.flex-register-form .flex-container .field .select input {
	padding-left: 7.5rem !important;
	height: 3.75rem !important;
	font-size: 1.25rem !important;

	border: 0.07rem solid #cad4e5 !important;
	border-radius: 2.5rem !important;
}

.flex-register-form .flex-container .field .select input.dropdown__search {
	height: 2.75rem !important;
	font-size: 1rem !important;
	padding: 1rem !important;
	padding-left: 1rem !important;

}

.flex-register-form .flex-container .field .selected--phone_code__dropdown .dropdown__label {
	font-size: 1.25rem !important;
}

.flex-register-form .flex-container .field .select .select-phone {
	width: 6.5rem !important;
}

.flex-register-form .flex-container .field .select .select-phone .select-default__in__control .select-default__in__indicators .select-default__in__indicator:before {
	font-size: 1.2rem !important;
}

.flex-register-form .flex-container .field .select .label-select-phone {
	margin-top: 0.188rem !important;
	padding-left: 0.313rem !important;
	font-size: 1.38rem !important;
	text-align: left !important;
}

.flex-register-form .flex-container .field .label {
	font-size: 1rem !important;
	font-weight: 700 !important;
	height: 1.5rem !important;
}

.form_wrap .reg-btn {
    position: relative;
	border-radius: 2.5rem !important;
	font-weight: 700 !important;
	color: transparent !important;
	background: rgb(0, 0, 0) !important;
	font-size: 1.375rem !important;
	height: 3.75rem !important;
	transition: 0.3s;
}

.form_wrap .reg-btn::after {
    content: "Участвовать в розыгрыше";
    color: white;
    font-size: 1.375rem !important;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

html[lang="en"] .form_wrap .reg-btn::after{
    content: "Participate in the Giveaway";
    color: white;
    font-size: 1.375rem !important;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.form_wrap .reg-btn:hover {
    transform: translateY(-2px) !important;
}

.flex-register-form .flex-container .field .checkbox .checkbox-text {
	padding-left: 1rem !important;
	padding-top: 0.313rem !important;
	font-size: 1.1rem !important;
}




.flex-register-form .flex-container .field .checkbox .checkbox__input+.fa {
	font-size: 1.563rem !important;
}

.flex-register-form .flex-container .field .select .select-phone .select-default__in__control {
	height: 3.5rem !important;
	position: relative;
}

.flex-register-form .flex-container .field .select .select-phone .select-default__in__control .select-default__in__value-container {
	height: 2.25rem !important;
	top: 0.313rem !important;
}

.flex-register-form .flex-container .field .select .select-phone .select-default__in__control .select-default__in__indicators {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	padding-left: 0.625rem !important;
	margin-right: -1rem !important;
	padding-bottom: 0.25rem !important;
}

.icon-flag {
	flex-shrink: 0;
	width: 1.25rem !important;
	height: 1.25rem !important;
	min-width: auto !important;
	min-height: auto !important;
}

.flex-register-form .flex-container .field .reg-btn {
	position: relative;

	/* display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem; */

}

.flex-register-form .flex-container .field .error {
	font-weight: 500 !important;
	font-size: 0.88rem !important;
	line-height: 143% !important;
	color: #fb3640 !important;
}
/*  */

.footer {
    position: relative;
    padding: 2rem 0 2rem 0;
    color: var(--color-dark);
    overflow: hidden;
    z-index: 7;
}

.footer .wave {
    z-index: 1;
}

.footer .footer-content {
    position: relative;
    z-index: 2;
    font-size: 0.875rem;
}

/* Mobile Styles (< 850px) */
@media screen and (max-width: 850px) {
    .cta-parallax {
        inset: auto 0 0 0;
        height: auto;
        transform-origin: center bottom;
    }
    html {
        /* 
           Mobile Reference: 404px 
           16px / 404px * 100 = 3.960396vw 
           This ensures that 1rem on a 404px screen physically equals 16px, 
           and scales down/up linearly ("Rubber").
        */
        font-size: 3.9604vw;
    }

    .cta-block {
        padding-bottom: 20rem !important;
    }

    .socials {
        justify-content: center;
        gap: 1rem;
        display: inline-flex;
    }

    .cta-content h1 {
        font-size: 2.2rem;
    }

    .timer-value {
        font-size: 2.75rem;
        letter-spacing: -0.04em;
    }

    .action-cta-box .promo-period {
        font-size: 1.0625rem;
        text-align: center;
    }

    .action-text h1 {
        margin-bottom: 2rem;
        font-size: 2.25rem;
    }

    .levels-block {
        padding-bottom: 0rem !important;
    }

    .level-img {
        margin-bottom: 1.5rem;
    }

    .level-title {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .level-features li {
        font-size: 1.0625rem;
        line-height: 1.3;
        gap: 1.25rem;
        margin-bottom: 1rem;
    }

    .countdown-timer {
        margin-bottom: 0rem;
    }

    .hero-block {
        padding-top: 1.5rem !important;
    }

    .hero-features li,
    .action-features li {
    align-items: flex-start;
    gap: 1.25rem;
    font-size: 1.0625rem;
    }

    .icon-wrapper {
        width: 4rem;
        height: 4rem;
    }
    
    .icon-base {
        width: 2.5rem;
        height: 2.5rem;
    }

    .level-desc {
        font-size: 0.9375rem;
        line-height: 1.3;
        padding: 0.4rem 0.6rem;
    }

    h1 {
        font-size: 2.4rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        line-height: 1.05;
        letter-spacing: -0.01em;
    }

    .text-center {
        text-align: center;
        padding: 0rem 0rem 0rem 0rem;
    }

    .promo-period {
        font-size: 1.125rem;
        line-height: 1.3;
        border-radius: 0.75rem;
        padding: 0.4rem 0.6rem;
    }

    .header {
        position: relative;
        background: linear-gradient(to right, var(--color-blue), var(--color-blue));
    }

    .nav {
        display: none;
    }

    .block {
        padding: 2rem 0 9rem 0;
    }

    .hero-content,
    .levels-grid,
    .action-content,
    .footer-content {
        display: flex;
        flex-direction: column;
    }

    .hero-title {
        font-size: 2.6rem;
        line-height: 1;
        order: 2;
        margin-bottom: 1.5rem;
        letter-spacing: -0.01em;
    }


    /* Reorder Hero Text Elements */
    .hero-text {
        display: flex;
        flex-direction: column;
    }

    .hero-tag {
        order: 1;
        font-size: 1rem;
        line-height: 1.3;
        align-self: flex-start;
        padding: 0.4rem 0.6rem;
        margin-bottom: 0.75rem;
    }

    .hero-text .btn-black {
        order: 3;
        margin-bottom: 2.5rem;
        /* Gap between button and features */
    }

    /* Lists */
    .hero-features,
    .action-features {
        list-style: none;
        margin-bottom: 0rem;
        /* Keep breathing room below lists */
    }

    .hero-features {
        order: 4;
        max-width: 100%;
    }

    .action-block {
        display: flex;
        flex-direction: column;
        padding-bottom: 10rem;
    }

    .action-block > .container {
        order: 1;
        position: relative;
        z-index: 2;
    }

    .action-image {
        position: relative;
        order: 2;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 95%;
        height: auto;
        max-height: none;
        margin: 1.5rem 0 -15.5rem 0;
        pointer-events: none;
        z-index: 1;
    }

    .action-santa-img {
        width: 100%;
        height: auto;
        object-fit: contain;
        transform: translateY(var(--scroll-shift, 0px)) scale(1);
        transform-origin: center bottom;
    }

    .hero-image {
        order: 1;
        /* Move image AFTER text on mobile */
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 0 auto -6rem auto;
        /* Keep overlap on wave while centering horizontally */
        margin-top: 0rem;
    }

    .hero-santa-img {
        transform: translateY(var(--scroll-shift, 0px)) scale(1);
        transform-origin: center bottom;
    }

    .countdown-timer {
        gap: 0rem;
    }

    .action-text .countdown-timer {
        margin-bottom: 1.25rem;
    }

    .action-text .btn-black {
        margin-top: 0;
        margin-bottom: 1.5rem;
        font-size: 1.125rem;
    }

    .action-block {
        padding-top: 4rem !important;
        padding-bottom: 16rem;
    }

    .level-card {
        margin-bottom: 2.5rem;
        padding: 1rem;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .btn-black {
        font-size: 1.25rem;
        padding: 1.375rem 1rem;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    br {
        display: none;
        /* Hide line breaks on mobile */
    }

    /* Exceptions for breaks */
    br.mob-br {
        display: block !important;
    }

    .gift-decoration-img {
        width: 9.375rem;
        /* 150px scaled */
        top: -3.75rem;
        right: -1.25rem;
    }

    /* Mobile form adjustments */
    .form_wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .flex-register-form .flex-container {
        padding: 2rem 1.5rem 2.5rem !important;
    }

    .flex-register-form .label {
        font-size: 0.8125rem !important;
    }

    .flex-register-form input[type="text"],
    .flex-register-form input[type="email"],
    .flex-register-form input[type="tel"],
    .flex-register-form .phone-input {
        padding: 1rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }

    .flex-register-form .reg-btn {
        padding: 1.125rem 1.5rem !important;
        font-size: 1rem !important;
    }

    /* //////////////////////////// */

    .form_wrap {
		width: 100%;
	}

	.form_row_wrap {
		max-width: 100%;
	}

	.form_row_wrap .banner_date {
		width: -webkit-fill-available;
		text-align: center;
	}

	.form_wrap .flex-register-form .flex-container {
		padding: 2rem 1.5rem 2.5rem !important;
	}

    .form_wrap .reg-btn::after,
    html[lang="en"] .form_wrap .reg-btn::after{
        font-size: 1rem !important;
    }

    .flex-register-form .flex-container .field .checkbox .checkbox-text{
        text-align: left;
    }
}

/* Desktop Styles (> 851px) */
@media screen and (min-width: 851px) {
    .nav {
        display: block;
    }

    /* Hero Image Breakout */
    #hero .container {
        position: static;
        /* Let .hero-image anchor to .hero-block */
    }

    .hero-content {
        display: flex;
        align-items: center;
        padding-top: 8.5rem;
        position: static;
        /* BREAKOUT: Let .hero-image see .hero-block */
    }

    .hero-text {
        flex: 1;
        max-width: 52%;
        position: relative;
        /* Context for Z-index */
        z-index: 2;
        /* Text above image */
    }

    .hero-image {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60vw;
        /* Rubber size: 60% viewport */
        max-width: 75rem;
        height: auto;
        z-index: 1;
        pointer-events: none;
        display: flex;
        align-items: flex-end;
        /* Align image to bottom */
    }


    .levels-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    .action-content {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        position: relative;
    }

    .action-block > .action-image {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 51vw;
        max-width: none;
        height: auto;
        z-index: 1;
        pointer-events: none;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
    }
    
    .action-block > .action-image .action-santa-img {
        width: 100%;
        height: auto;
    }

    .action-text {
        flex: 1;
        max-width: 46%;
        position: relative;
        z-index: 2;
        margin-left: 0;
    }

    .action-cta-box {
        padding: 2rem 2rem 2.5rem 2rem;
        gap: 0rem;
        width: 100%;
    }

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

    .socials {
    display: flex;
    gap: 1.5rem;
    }
}


.social-icon-img {
    width: 100%;
    height: 100%;
    display: block;
    transition: filter 200ms ease, transform 200ms ease;
    filter: invert(0%) saturate(0%);
    }

.social-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        text-decoration: none;
}

.social-icon:hover .social-icon-img {
    /* Approximate #14C25D */
    filter: invert(51%) sepia(82%) saturate(712%) hue-rotate(86deg) brightness(92%) contrast(94%);
    transform: scale(1.05);
    }

.policy-link {
    color: var(--color-dark);
    text-decoration: none;
    transition: color 200ms ease;
}

.policy-link:hover {
    color: var(--color-green-dark);
}

/* English page tweaks */
html[lang="en"] .hero-tag {
    font-size: 1rem;
}

@media screen and (max-width: 850px) {
    html[lang="en"] .hero-tag {
        font-size: 0.9375rem;
    }
    html[lang="en"] .hero-title {
        font-size: 2.275rem;
    }
}