@font-face {
    font-family: "Thmanyah Sans";
    src: url("assets/fonts/thmanyahsans-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Thmanyah Sans";
    src: url("assets/fonts/thmanyahsans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Thmanyah Sans";
    src: url("assets/fonts/thmanyahsans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Thmanyah Sans";
    src: url("assets/fonts/thmanyahsans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Thmanyah Sans";
    src: url("assets/fonts/thmanyahsans-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Thmanyah Display";
    src: url("assets/fonts/thmanyahserifdisplay-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Thmanyah Display";
    src: url("assets/fonts/thmanyahserifdisplay-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Thmanyah Display";
    src: url("assets/fonts/thmanyahserifdisplay-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Thmanyah Display";
    src: url("assets/fonts/thmanyahserifdisplay-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Thmanyah Text";
    src: url("assets/fonts/thmanyahseriftext-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Thmanyah Text";
    src: url("assets/fonts/thmanyahseriftext-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Thmanyah Text";
    src: url("assets/fonts/thmanyahseriftext-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Thmanyah Text";
    src: url("assets/fonts/thmanyahseriftext-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

:root {
    --orange: #df682c;
    --white: #fff;
    --card: rgba(142, 142, 142, .62);

    /* تحكم عام في أماكن العناصر */
    --edge: clamp(46px, 7.2vw, 150px);
    --heroRight: clamp(120px, 14vw, 280px);
    --copyTop: clamp(292px, 43.5vh, 495px);

    /* تحكم في المسافات بين عناصر الهيرو */
    --gap-cup-title: clamp(18px, 2.2vh, 30px);
    --gap-title-text: clamp(28px, 3.3vh, 44px);
    --gap-text-social: clamp(28px, 3.4vh, 44px);

    /* تحكم في صورة كأس العالم */
    --cupWidth: clamp(56px, 3.4vw, 74px);
    --cupLift: clamp(120px, 15vh, 165px);
    --cupRightOffset: 10px;
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    background: #000;
    color: var(--white)
}

body {
    font-family: "Thmanyah Sans", "Tajawal", "Cairo", Arial, sans-serif;
    overflow-x: hidden
}

.page {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 620px;
    max-height: 1200px;
    overflow: hidden;
    background: #000;
    isolation: isolate
}

.bg,
.bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block
}

.bg {
    z-index: -3
}

.bg img {
    object-fit: cover;
    object-position: center top ;
}

.shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 64% 50%, rgba(0, 0, 0, .01), rgba(0, 0, 0, .24) 78%),
        linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .06) 38%, rgba(0, 0, 0, .22));
    pointer-events: none
}

.brand {
    position: absolute;
    top: clamp(18px, 3.1vh, 34px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    text-align: center
}

.brand img {
    width: clamp(132px, 8.7vw, 174px);
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .72))
}

.cup {
    position: absolute;
    z-index: 5;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .8))
}

.cup-top {
    display: none
}

.cup-side {
    width: var(--cupWidth);
    right: calc(var(--heroRight) + var(--cupRightOffset));
    top: calc(var(--copyTop) - var(--cupLift));
    z-index: 6;
}


.hero-copy {
    position: absolute;
    right: var(--heroRight);
    top: var(--copyTop);
    z-index: 3;
    width: clamp(480px, 36vw, 680px);
    text-align: right;
    text-shadow: 0 7px 20px rgba(0, 0, 0, .9)
}

.hero-copy h1 {
    margin: 0 0 var(--gap-title-text);
    font-family: "Thmanyah Sans", "Tajawal", "Cairo", Arial, sans-serif;
    font-size: clamp(36px, 2.8vw, 54px);
    font-weight: 900;
    line-height: 1.32;
    letter-spacing: -.8px;
}

.hero-copy p {
    margin: 0;
    font-size: clamp(22px, 1.7vw, 32px);
    font-weight: 900;
    line-height: 1.62;
}

.social {
    margin-top: var(--gap-text-social);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(18px, 1.4vw, 26px);
    direction: ltr;
    padding-right: 34px;
}

.social a {
    width: clamp(40px, 2.8vw, 50px);
    height: clamp(40px, 2.8vw, 50px);
    border: 2px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, .25);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
    transition: .2s ease
}

.social a:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .13)
}

.social svg {
    width: 54%;
    height: 54%;
    fill: currentColor;
    display: block
}

.register-card {
    position: absolute;
    left: var(--edge);
    top: clamp(175px, 28vh, 320px);
    z-index: 4;
    width: clamp(360px, 22vw, 430px);
    padding: clamp(24px, 3.1vh, 34px) clamp(26px, 1.8vw, 34px) clamp(28px, 3.5vh, 38px);
    background: var(--card);
    border-radius: 0 0 12px 12px;
    box-shadow: 0 22px 65px rgba(0, 0, 0, .43);
    backdrop-filter: blur(3px);
    direction: rtl;
    text-align: center;
    color: #fff;
    overflow: hidden
}

.accent {
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: var(--orange)
}

.register-card h2 {
    margin: 0 0 25px;
    font-family: "Thmanyah Sans", "Tajawal", "Cairo", Arial, sans-serif;
    font-size: clamp(27px, 1.8vw, 33px);
    font-weight: 900;
    line-height: 1.08;
    text-shadow: 0 4px 10px rgba(0, 0, 0, .55)
}

.register-card p {
    margin: 0 0 clamp(18px, 2.4vh, 25px);
    font-size: clamp(15px, 1vw, 18px);
    font-weight: 900;
    line-height: 1.35;
    text-shadow: 0 4px 10px rgba(0, 0, 0, .55)
}

.form-message {
    display: none;
    margin: 0 0 12px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45
}

.form-message.success,
.form-message.error {
    display: block
}

.form-message.success {
    background: rgba(28, 142, 72, .88)
}

.form-message.error {
    background: rgba(180, 44, 35, .9)
}

form {
    display: grid;
    gap: clamp(12px, 1.65vh, 18px)
}

input,
select {
    width: 100%;
    height: clamp(44px, 5.9vh, 52px);
    border: 1.8px solid rgba(0, 0, 0, .70);
    border-radius: 13px;
    background: rgba(247, 247, 247, .84);
    color: #111;
    padding: 0 19px;
    text-align: right;
    font: 800 clamp(14px, .82vw, 15px)/1 "Thmanyah Sans", Arial, sans-serif;
    outline: 0;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .16)
}

input:focus,
select:focus {
    background: #fff;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(223, 104, 44, .18)
}

button {
    justify-self: center;
    width: clamp(145px, 8.3vw, 160px);
    height: clamp(42px, 5.3vh, 48px);
    border: 0;
    border-radius: 7px;
    background: var(--orange);
    color: #fff;
    font: 900 clamp(22px, 1.35vw, 25px)/1 "Thmanyah Sans", Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .28);
    transition: .18s ease
}

button:hover {
    transform: translateY(-1px);
    filter: brightness(1.04)
}

/* Force the uploaded Thmanyah Sans font on all visible text */
body,
input,
select,
button,
.hero-copy h1,
.hero-copy p,
.register-card h2,
.register-card p {
    font-family: "Thmanyah Sans", "Tajawal", "Cairo", Arial, sans-serif !important;
}

.hero-copy h1,
.register-card h2,
button {
    font-weight: 900 !important;
}

.hero-copy p,
.register-card p,
input,
select {
    font-weight: 700 !important;
}

@media (min-width:1700px) {
    :root {
        --edge: clamp(115px, 8vw, 170px);
        --heroRight: clamp(230px, 15vw, 320px);
        --copyTop: clamp(410px, 42.5vh, 470px);
        --cupWidth: clamp(62px, 3.1vw, 76px);
        --cupLift: clamp(135px, 14vh, 170px);
        --cupRightOffset: 18px;
        --gap-title-text: clamp(34px, 3.3vh, 48px);
        --gap-text-social: clamp(34px, 3.2vh, 48px)
    }

    .hero-copy {
        width: clamp(600px, 34vw, 700px);
        top: var(--copyTop)
    }

    .hero-copy h1 {
        font-size: clamp(46px, 3.2vw, 56px)
    }

    .hero-copy p {
        font-size: clamp(28px, 1.5vw, 32px)
    }

    .cup-side {
        width: var(--cupWidth);
        right: calc(var(--heroRight) + var(--cupRightOffset));
        top: calc(var(--copyTop) - var(--cupLift));
    }

    .register-card {
        top: 29vh
    }
}

@media (max-width:1100px) and (min-width:769px) {
    :root {
        --edge: 45px;
        --heroRight: 110px;
        --cupWidth: 54px;
        --cupLift: 118px;
        --cupRightOffset: 18px;
        --gap-title-text: 24px;
        --gap-text-social: 26px
    }

    .register-card {
        width: 350px
    }

    .hero-copy {
        width: 440px
    }

    .hero-copy h1 {
        font-size: 35px;
        line-height: 1.17
    }

    .hero-copy p {
        font-size: 22px;
        line-height: 1.45
    }

    .cup-side {
        width: var(--cupWidth);
        right: calc(var(--heroRight) + var(--cupRightOffset));
        top: calc(var(--copyTop) - var(--cupLift));
    }
}

@media (max-height:760px) and (min-width:769px) {
    .page {
        min-height: 620px
    }

    .brand img {
        width: 132px
    }

    .register-card {
        top: 24vh;
        padding-top: 24px;
        padding-bottom: 26px
    }

    .hero-copy {
        top: 41vh
    }

    .cup-side {
        width: clamp(50px, 3.4vw, 68px);
        top: calc(41vh - clamp(105px, 13vh, 130px));
    }

    .hero-copy h1 {
        font-size: clamp(32px, 2.35vw, 40px);
        line-height: 1.24
    }

    .hero-copy p {
        font-size: clamp(21px, 1.6vw, 27px);
        line-height: 1.55
    }
}


@media (max-width:768px) {
    html,
    body {
        background: #000;
        min-height: 100%;
        overflow-x: hidden;
    }

    .page {
        height: auto;
        min-height: 100svh;
        max-height: none;
        overflow: visible;
        padding: 0 0 46px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        background: #000;
    }

    .bg {
        position: absolute;
        top: 205px;
        left: 0;
        right: 0;
        height: 650px;
        inset: auto 0 auto 0;
        z-index: -3;
        overflow: hidden;
    }

    .bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .shade {
        position: absolute;
        top: 205px;
        left: 0;
        right: 0;
        height: 650px;
        inset: 205px 0 auto 0;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, .08) 0%,
            rgba(0, 0, 0, .18) 38%,
            rgba(0, 0, 0, .34) 68%,
            rgba(0, 0, 0, .78) 100%
        );
        pointer-events: none;
    }

    .brand {
        position: absolute;
        top: 30px;
        left: 27%;
        transform: translateX(-50%);
        z-index: 8;
        margin: 0;
        order: initial;
    }

    .brand img {
        width: clamp(100px, 39vw, 100px);
        height: auto;
    }

    .cup-side {
        display: none;
    }

    .cup-top {
        display: block;
        position: absolute;
        top: 30px;
        right: 20%;
        transform: translateX(50%);
        width: clamp(50px, 15vw, 50px);
        height: auto;
        margin: 0;
        z-index: 8;
        order: initial;
    }

    .hero-copy {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: min(94vw, 560px);
        text-align: center;
        z-index: 4;
        order: 3;
        margin-top: 170px;
        text-shadow: 0 7px 20px rgba(0, 0, 0, .95);
    }

    .hero-copy h1 {
        font-size: clamp(30px, 12vw, 40px);
        line-height: 1.12;
        margin: 0 0 32px;
        letter-spacing: -1px;
    }

    .hero-copy p {
        margin: 0;
        font-size: clamp(20px, 5.2vw, 30px);
        line-height: 1.42;
        font-weight: 900;
    }

    .social {
        display: none;
    }

    .register-card {
        position: relative;
        left: auto;
        top: auto;
        bottom: auto;
        transform: none;
        width: min(86vw, 520px);
        margin: 92px auto 0;
        padding: 34px 26px 36px;
        background: rgba(142, 142, 142, .78);
        border-radius: 0 0 12px 12px;
        z-index: 6;
        order: 4;
        overflow: hidden;
    }

    .accent {
        height: 6px;
    }

    .register-card h2 {
        font-size: clamp(32px, 7.6vw, 44px);
        line-height: 1.05;
        margin: 0 0 10px;
    }

    .register-card p {
        font-size: clamp(15px, 3.8vw, 20px);
        line-height: 1.35;
        margin: 0 0 30px;
    }

    form {
        gap: 22px;
    }

    input,
    select {
        height: clamp(60px, 14vw, 74px);
        border-radius: 15px;
        font-size: clamp(18px, 4.7vw, 24px);
        padding: 0 24px;
    }

    button {
        margin-top: 8px;
        width: clamp(220px, 48vw, 300px);
        height: clamp(58px, 13.5vw, 72px);
        border-radius: 9px;
        font-size: clamp(31px, 7.6vw, 42px);
    }
}

@media (max-width:420px) {
    .bg {
        top: 190px;
        height: 620px;
    }

    .shade {
        top: 190px;
        inset: 190px 0 auto 0;
        height: 620px;
    }

    .brand {
        top: 48px;
        left: 29%;
    }

    .brand img {
        width: 146px;
    }

    .cup-top {
        top: 38px;
        right: 22%;
        width: 88px;
    }

    .hero-copy {
        width: 95vw;
        margin-top: 345px;
    }

    .hero-copy h1 {
        font-size: 30px;
        line-height: 1.12;
        margin-bottom: 26px;
    }

    .hero-copy p {
        font-size: 24px;
        line-height: 1.38;
    }

    .register-card {
        width: 86vw;
        margin-top: 72px;
        padding: 28px 22px 30px;
    }

    .register-card h2 {
        font-size: 30px;
    }

    .register-card p {
        font-size: 18px;
        margin-bottom: 24px;
    }

    form {
        gap: 18px;
    }

    input,
    select {
        height: 58px;
        font-size: 18px;
        border-radius: 14px;
    }

    button {
        width: 220px;
        height: 58px;
        font-size: 31px;
    }
}

@media (max-height:700px) and (max-width:768px) {
    .bg {
        top: 160px;
        height: 540px;
    }

    .shade {
        top: 160px;
        inset: 160px 0 auto 0;
        height: 540px;
    }

    .brand {
        top: 34px;
    }

    .brand img {
        width: 126px;
    }

    .cup-top {
        top: 30px;
        width: 74px;
    }

    .hero-copy {
        margin-top: 295px;
    }

    .hero-copy h1 {
        font-size: 34px;
        margin-bottom: 16px;
    }

    .hero-copy p {
        font-size: 19px;
        line-height: 1.3;
    }

    .register-card {
        margin-top: 48px;
        padding: 22px 20px 24px;
    }

    .register-card h2 {
        font-size: 25px;
    }

    .register-card p {
        font-size: 15px;
        margin-bottom: 18px;
    }

    form {
        gap: 13px;
    }

    input,
    select {
        height: 46px;
        font-size: 15px;
    }

    button {
        width: 180px;
        height: 48px;
        font-size: 25px;
    }
}

/* ==============================
   FONT FIX - match reference look
   Use Thmanyah Sans Black, not Display/Text
   ============================== */

html,
body,
.page,
.hero-copy,
.register-card,
input,
select,
button {
    font-family: "Thmanyah Sans", Arial, sans-serif !important;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

.hero-copy h1 {
    font-family: "Thmanyah Sans", Arial, sans-serif !important;
    font-weight: 900 !important;
    font-size: clamp(58px, 4.7vw, 88px);
    line-height: 1.08;
    letter-spacing: -1.8px;
    word-spacing: 2px;
}

.hero-copy p {
    font-family: "Thmanyah Sans", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(25px, 1.85vw, 34px);
    line-height: 1.36;
    letter-spacing: -.4px;
}

.register-card h2 {
    font-family: "Thmanyah Sans", Arial, sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -.8px;
}

.register-card p,
input,
select {
    font-family: "Thmanyah Sans", Arial, sans-serif !important;
    font-weight: 700 !important;
}

button {
    font-family: "Thmanyah Sans", Arial, sans-serif !important;
    font-weight: 900 !important;
}

/* Desktop large screens */
@media (min-width:1700px) {
    .hero-copy h1 {
        font-size: clamp(54px, 3.35vw, 68px);
        line-height: 1.06;
        letter-spacing: -2px;
    }

    .hero-copy p {
        font-size: clamp(29px, 1.65vw, 36px);
        line-height: 1.35;
    }
}

/* Tablet desktop */
@media (max-width:1100px) and (min-width:769px) {
    .hero-copy h1 {
        font-size: 54px;
        line-height: 1.08;
        letter-spacing: -1.4px;
    }

    .hero-copy p {
        font-size: 24px;
        line-height: 1.36;
    }
}

/* Low height desktop */
@media (max-height:760px) and (min-width:769px) {
    .hero-copy h1 {
        font-size: clamp(44px, 3.45vw, 58px);
        line-height: 1.07;
    }

    .hero-copy p {
        font-size: clamp(23px, 1.75vw, 30px);
        line-height: 1.34;
    }
}

/* Mobile */
@media (max-width:768px) {
    .hero-copy {
        margin-top: 140px !important; /* تقليل المسافة من الأعلى بدلاً من القيمة السالبة */
        position: relative;
        z-index: 10;
    }

    .hero-copy h1 {
        font-family: "Thmanyah Sans", Arial, sans-serif !important;
        font-weight: 900 !important;
        font-size: clamp(25px, 12.5vw, 40px);
        line-height: 1.08;
        letter-spacing: -1.4px;
        word-spacing: 1px;
        margin-top: 0 !important; /* صفرنا المارجن هنا */
    }

    .hero-copy p {
        font-family: "Thmanyah Sans", Arial, sans-serif !important;
        font-weight: 700 !important;
        font-size: clamp(20px, 5.4vw, 30px);
        line-height: 1.36;
    }
}

@media (max-width:420px) {
    .hero-copy h1 {
        font-size: 44px;
        line-height: 1.07;
        letter-spacing: -1.5px;
    }

    .hero-copy p {
        font-size: 24px;
        line-height: 1.34;
    }
}

@media (max-height:700px) and (max-width:768px) {
    .hero-copy h1 {
        font-size: 36px;
        line-height: 1.07;
    }

    .hero-copy p {
        font-size: 20px;
        line-height: 1.32;
    }
}


/* =========================================================
   FORM POLISH OVERRIDE - cleaner width, softer edges, mobile
   ========================================================= */

.register-card{
    width: clamp(315px, 20vw, 390px) !important;
    padding: clamp(20px, 2.5vh, 28px) clamp(20px, 1.45vw, 28px) clamp(22px, 2.7vh, 30px) !important;
    border-radius: 0 0 18px 18px !important;
    background: rgba(142,142,142,.60) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.38) !important;
    backdrop-filter: blur(4px) !important;
}

.accent{
    height: 5px !important;
}

.register-card h2{
    margin-bottom: 8px !important;
    font-size: clamp(25px, 1.55vw, 30px) !important;
    line-height: 1.12 !important;
}

.register-card p{
    margin-bottom: 18px !important;
    font-size: clamp(14px, .9vw, 16px) !important;
    line-height: 1.35 !important;
}

form{
    gap: 11px !important;
}

input,
select{
    height: 46px !important;
    border-radius: 12px !important;
    padding: 0 17px !important;
    font-size: 15px !important;
    border-width: 1.5px !important;
    background: rgba(247,247,247,.82) !important;
}

button{
    width: 145px !important;
    height: 43px !important;
    border-radius: 8px !important;
    font-size: 24px !important;
    margin-top: 2px !important;
}

/* Tablet */
@media (max-width:1100px) and (min-width:769px){
    .register-card{
        width: 330px !important;
        padding: 22px 22px 24px !important;
    }

    .register-card h2{
        font-size: 26px !important;
    }

    .register-card p{
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }

    input,
    select{
        height: 44px !important;
        font-size: 14px !important;
    }

    button{
        width: 138px !important;
        height: 42px !important;
        font-size: 23px !important;
    }
}

/* Mobile */
@media (max-width:768px){
    .register-card{
        width: min(82vw, 370px) !important;
        margin-top: 58px !important;
        padding: 24px 20px 26px !important;
        border-radius: 0 0 18px 18px !important;
        background: rgba(142,142,142,.72) !important;
    }

    .register-card h2{
        font-size: clamp(24px, 6.4vw, 31px) !important;
        margin-bottom: 7px !important;
        line-height: 1.12 !important;
    }

    .register-card p{
        font-size: clamp(13px, 3.7vw, 16px) !important;
        margin-bottom: 18px !important;
        line-height: 1.35 !important;
    }

    form{
        gap: 12px !important;
    }

    input,
    select{
        height: 46px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
        padding: 0 16px !important;
    }

    button{
        width: 150px !important;
        height: 44px !important;
        font-size: 25px !important;
        border-radius: 8px !important;
        margin-top: 2px !important;
    }
}

/* Small Mobile */
@media (max-width:420px){
    .register-card{
        width: 82vw !important;
        margin-top: 52px !important;
        padding: 22px 18px 24px !important;
    }

    .register-card h2{
        font-size: 25px !important;
    }

    .register-card p{
        font-size: 14px !important;
        margin-bottom: 16px !important;
    }

    form{
        gap: 11px !important;
    }

    input,
    select{
        height: 44px !important;
        font-size: 14px !important;
        border-radius: 11px !important;
    }

    button{
        width: 145px !important;
        height: 42px !important;
        font-size: 24px !important;
    }
}

/* Short mobile screens */
@media (max-height:700px) and (max-width:768px){
    .register-card{
        margin-top: 42px !important;
        padding: 20px 18px 22px !important;
    }

    .register-card h2{
        font-size: 23px !important;
    }

    .register-card p{
        font-size: 13px !important;
        margin-bottom: 14px !important;
    }

    form{
        gap: 10px !important;
    }

    input,
    select{
        height: 40px !important;
        font-size: 13px !important;
    }

    button{
        width: 135px !important;
        height: 39px !important;
        font-size: 22px !important;
    }
}

/* =====================================================
   FINAL RESPONSIVE FIX
   - Better balanced mobile headline/body text
   - Show the full desktop background on large screens
   ===================================================== */

@media (min-width: 1200px) and (min-height: 850px) {
    .bg img {
        object-fit: contain;
        object-position: center center;
        background: #000;
    }
}

@media (min-width: 1600px) {
    .bg img {
        object-fit: contain;
        object-position: center center;
        background: #000;
    }
}

@media (max-width: 768px) {
    .hero-copy {
        width: min(90vw, 430px);
        margin-top: clamp(260px, 42vh, 345px);
        padding-inline: 10px;
    }

    .hero-copy h1 {
        font-size: clamp(31px, 9.8vw, 40px) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.8px !important;
        word-spacing: 0 !important;
        margin-bottom: clamp(16px, 4.5vw, 24px) !important;
    }

    .hero-copy p {
        font-size: clamp(17px, 4.9vw, 22px) !important;
        line-height: 1.5 !important;
        font-weight: 700 !important;
        max-width: 340px;
        margin-inline: auto;
    }

    .register-card {
        margin-top: clamp(46px, 10vw, 68px);
    }
}

@media (max-width: 420px) {
    .hero-copy {
        width: 91vw;
        margin-top: clamp(300px, 43vh, 345px);
    }

    .hero-copy h1 {
        font-size: clamp(34px, 10.6vw, 39px) !important;
        line-height: 1.15 !important;
        margin-bottom: 18px !important;
    }

    .hero-copy p {
        font-size: clamp(18px, 5.25vw, 21px) !important;
        line-height: 1.48 !important;
        max-width: 315px;
    }
}

@media (max-width: 360px) {
    .hero-copy h1 {
        font-size: 31px !important;
    }

    .hero-copy p {
        font-size: 17px !important;
        max-width: 290px;
    }
}

@media (max-height: 700px) and (max-width: 768px) {
    .hero-copy {
        margin-top: clamp(245px, 40vh, 295px);
    }

    .hero-copy h1 {
        font-size: clamp(29px, 9.2vw, 34px) !important;
        margin-bottom: 14px !important;
    }

    .hero-copy p {
        font-size: clamp(16px, 4.7vw, 19px) !important;
        line-height: 1.42 !important;
    }
}


/* =====================================================
   MOBILE POSTER STYLE FINAL - clean organized layout
   matches the requested mobile reference
   ===================================================== */
@media (max-width: 768px){
    html,
    body{
        background:#000 !important;
        overflow-x:hidden !important;
    }

    .page{
        min-height:100svh !important;
        height:auto !important;
        max-height:none !important;
        overflow:hidden !important;
        padding:0 0 36px !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        background:#000 !important;
    }

    .bg{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        min-height:100svh !important;
        z-index:-3 !important;
        overflow:hidden !important;
    }

    .bg img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center top !important;
    }

    .shade{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        z-index:-2 !important;
        background:
            linear-gradient(180deg,
                rgba(0,0,0,.72) 0%,
                rgba(0,0,0,.52) 18%,
                rgba(0,0,0,.35) 38%,
                rgba(0,0,0,.64) 66%,
                rgba(0,0,0,.94) 100%
            ) !important;
    }

    .brand{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        transform:none !important;
        z-index:8 !important;
        width:100% !important;
        display:flex !important;
        justify-content:flex-start !important;
        padding:32px 0 0 14vw !important;
        margin:0 !important;
        order:1 !important;
    }

    .brand img{
        width:clamp(118px, 35vw, 150px) !important;
        height:auto !important;
    }

    .cup-side{
        display:none !important;
    }

    .cup-top{
        display:block !important;
        position:absolute !important;
        top:26px !important;
        right:14vw !important;
        width:clamp(76px, 21vw, 96px) !important;
        height:auto !important;
        transform:none !important;
        z-index:8 !important;
    }

    .hero-copy{
        position:relative !important;
        top:auto !important;
        right:auto !important;
        left:auto !important;
        transform:none !important;
        order:2 !important;
        z-index:5 !important;
        width:min(92vw, 520px) !important;
        padding:0 12px !important;
        margin:130px auto 0 !important;
        text-align:center !important;
        text-shadow:0 8px 22px rgba(0,0,0,.95) !important;
    }

    .hero-copy h1{
        font-size:clamp(38px, 11.8vw, 58px) !important;
        line-height:1.13 !important;
        letter-spacing:-1.1px !important;
        word-spacing:0 !important;
        margin:0 0 18px !important;
        font-weight:900 !important;
    }

    .hero-copy h1::after{
        content:"";
        display:block;
        width:54px;
        height:4px;
        background:var(--orange);
        border-radius:20px;
        margin:18px auto 0;
    }

    .hero-copy p{
        font-size:clamp(19px, 5.25vw, 26px) !important;
        line-height:1.55 !important;
        font-weight:900 !important;
        max-width:390px !important;
        margin:0 auto !important;
    }

    .social{
        display:flex !important;
        order:3 !important;
        justify-content:center !important;
        align-items:center !important;
        gap:18px !important;
        padding:0 !important;
        margin:24px 0 0 !important;
        direction:ltr !important;
    }

    .social a{
        width:48px !important;
        height:48px !important;
        border-width:1.6px !important;
        background:rgba(0,0,0,.26) !important;
    }

    .register-card{
        position:relative !important;
        left:auto !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        transform:none !important;
        order:4 !important;
        z-index:6 !important;
        width:min(82vw, 390px) !important;
        margin:48px auto 0 !important;
        padding:32px 24px 30px !important;
        background:linear-gradient(180deg, rgba(112,112,112,.84), rgba(70,70,70,.88)) !important;
        border-radius:0 0 22px 22px !important;
        box-shadow:0 18px 50px rgba(0,0,0,.55) !important;
        backdrop-filter:blur(5px) !important;
    }

    .accent{
        height:4px !important;
        background:var(--orange) !important;
    }

    .register-card h2{
        font-size:clamp(30px, 8vw, 42px) !important;
        line-height:1.08 !important;
        margin:0 0 24px !important;
        font-weight:900 !important;
    }

    .register-card p{
        display:none !important;
    }

    form{
        gap:13px !important;
    }

    input,
    select{
        height:52px !important;
        border-radius:10px !important;
        border:1px solid rgba(0,0,0,.42) !important;
        background:linear-gradient(180deg, #fff, #efefef) !important;
        color:#111 !important;
        padding:0 18px !important;
        font-size:16px !important;
        font-weight:700 !important;
        box-shadow:inset 0 2px 5px rgba(0,0,0,.12) !important;
    }

    input::placeholder{
        color:#888 !important;
        opacity:1 !important;
    }

    button{
        width:150px !important;
        height:50px !important;
        margin-top:10px !important;
        border-radius:9px !important;
        font-size:27px !important;
        font-weight:900 !important;
        background:linear-gradient(180deg, #f07832, var(--orange)) !important;
        box-shadow:0 10px 22px rgba(0,0,0,.32) !important;
    }
}

@media (max-width: 420px){
    .brand{
        padding-top:30px !important;
        padding-left:13vw !important;
    }

    .brand img{
        width:120px !important;
    }

    .cup-top{
        top:24px !important;
        right:12vw !important;
        width:76px !important;
    }

    .hero-copy{
        margin-top:118px !important;
        width:94vw !important;
    }

    .hero-copy h1{
        font-size:38px !important;
        line-height:1.12 !important;
        margin-bottom:16px !important;
    }

    .hero-copy p{
        font-size:19px !important;
        line-height:1.5 !important;
        max-width:320px !important;
    }

    .social{
        gap:16px !important;
        margin-top:22px !important;
    }

    .social a{
        width:44px !important;
        height:44px !important;
    }

    .register-card{
        width:82vw !important;
        margin-top:44px !important;
        padding:28px 20px 26px !important;
        border-radius:0 0 18px 18px !important;
    }

    .register-card h2{
        font-size:30px !important;
        margin-bottom:22px !important;
    }

    form{
        gap:12px !important;
    }

    input,
    select{
        height:46px !important;
        font-size:14px !important;
        border-radius:9px !important;
    }

    button{
        width:140px !important;
        height:44px !important;
        font-size:24px !important;
    }
}

@media (max-width: 360px){
    .brand img{width:108px !important;}
    .cup-top{width:68px !important;}
    .hero-copy{margin-top:105px !important;}
    .hero-copy h1{font-size:33px !important;}
    .hero-copy p{font-size:17px !important;}
    .register-card{width:86vw !important; margin-top:34px !important; padding:24px 18px !important;}
    .register-card h2{font-size:26px !important;}
    input,select{height:42px !important; font-size:13px !important;}
    button{height:42px !important; font-size:23px !important;}
}

@media (max-height: 720px) and (max-width: 768px){
    .brand{padding-top:22px !important;}
    .cup-top{top:18px !important;}
    .hero-copy{margin-top:88px !important;}
    .hero-copy h1{font-size:clamp(30px, 9vw, 38px) !important; margin-bottom:12px !important;}
    .hero-copy h1::after{margin-top:12px !important; height:3px !important;}
    .hero-copy p{font-size:clamp(16px, 4.5vw, 19px) !important; line-height:1.42 !important;}
    .social{margin-top:16px !important;}
    .social a{width:38px !important; height:38px !important;}
    .register-card{margin-top:28px !important; padding:22px 18px 22px !important;}
    .register-card h2{font-size:25px !important; margin-bottom:16px !important;}
    form{gap:9px !important;}
    input,select{height:40px !important; font-size:13px !important;}
    button{width:132px !important; height:39px !important; font-size:22px !important; margin-top:6px !important;}
}