#joker-coins-landing{
    margin-top: -50px;
}
#joker-coins-landing,
#joker-coins-landing * { box-sizing: border-box; }

#joker-coins-landing {
    --jcl-red: #f3131d;
    --jcl-red-dark: #d90d16;
    --jcl-gold: #d99a00;
    --jcl-ink: #101014;
    --jcl-muted: #74747e;
    --jcl-line: #e8e8ee;
    width: 100%;
    overflow: hidden;
    background: #fff;
    color: var(--jcl-ink);
    font-family: "Montserrat", "Tajawal", sans-serif;
}

#joker-coins-landing a { text-decoration: none; }
#joker-coins-landing .jcl-wrap { width: min(100% - 48px, 1240px); margin-inline: auto; }

#joker-coins-landing .jcl-hero {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    background: radial-gradient(circle at 79% 50%, rgba(139,91,0,.24), transparent 27%), linear-gradient(105deg, #070709 0%, #09090c 58%, #120e0c 100%);
    color: #fff;
}

#joker-coins-landing .jcl-hero::after {
    position: absolute;
    right: -10%;
    bottom: -60%;
    width: 58%;
    height: 140%;
    border: 1px solid rgba(255,190,43,.08);
    border-radius: 50%;
    content: "";
}

#joker-coins-landing .jcl-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) 490px; align-items: center; min-height: 420px; }
#joker-coins-landing .jcl-hero-copy { max-width: 610px; padding: 54px 0; }
#joker-coins-landing .jcl-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; color: #c9a253; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
#joker-coins-landing .jcl-hero h1 { margin: 0; color: #fff; font-size: clamp(42px,4.25vw,65px); font-weight: 900; letter-spacing: -.045em; line-height: .98; }
#joker-coins-landing .jcl-hero h1 span { color: var(--jcl-red); }
#joker-coins-landing .jcl-hero-text { max-width: 570px; margin: 22px 0 0; color: #9b9ba3; font-size: 14px; line-height: 1.75; }
#joker-coins-landing .jcl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

#joker-coins-landing .jcl-btn { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; border-radius: 5px; font-size: 12px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
#joker-coins-landing .jcl-btn:hover { transform: translateY(-2px); }
#joker-coins-landing .jcl-btn-primary { background: var(--jcl-red); box-shadow: 0 9px 24px rgba(243,19,29,.26); color: #fff; }
#joker-coins-landing .jcl-btn-primary:hover { background: var(--jcl-red-dark); box-shadow: 0 12px 28px rgba(243,19,29,.32); color: #fff; }
#joker-coins-landing .jcl-btn-ghost { border: 1px solid #34343b; background: #17171b; color: #fff; }
#joker-coins-landing .jcl-btn-ghost:hover { background: #202026; color: #fff; }

#joker-coins-landing .jcl-coin-scene { position: relative; min-height: 390px; }
#joker-coins-landing .jcl-coin-scene > img { position: absolute; z-index: 2; top: 50%; left: 53%; width: 330px; height: auto; filter: drop-shadow(0 28px 35px rgba(0,0,0,.55)); transform: translate(-50%,-50%); }
#joker-coins-landing .jcl-glow { position: absolute; top: 50%; left: 53%; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle, rgba(255,183,0,.28), rgba(255,183,0,.05) 45%, transparent 70%); transform: translate(-50%,-50%); }
#joker-coins-landing .jcl-float-card { position: absolute; z-index: 3; display: flex; min-width: 98px; flex-direction: column; padding: 12px 14px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; background: rgba(24,22,22,.82); box-shadow: 0 12px 28px rgba(0,0,0,.28); backdrop-filter: blur(8px); }
#joker-coins-landing .jcl-float-card strong { color: #fff; font-size: 14px; line-height: 1; }
#joker-coins-landing .jcl-float-card small { margin-top: 5px; color: #8f8b8b; font-size: 8px; font-weight: 700; }
#joker-coins-landing .jcl-float-earned { top: 25%; left: 5%; }
#joker-coins-landing .jcl-float-value { bottom: 23%; left: 10%; }
#joker-coins-landing .jcl-float-tier { top: 48%; right: 0; }

#joker-coins-landing .jcl-content { padding-bottom: 82px; }
#joker-coins-landing .jcl-section { padding-top: 64px; }
#joker-coins-landing .jcl-heading { position: relative; margin-bottom: 26px; padding-inline-start: 17px; }
/* #joker-coins-landing .jcl-heading::before { position: absolute; top: 2px; bottom: 3px; left: 0; width: 4px; border-radius: 3px; background: var(--jcl-red); content: ""; } */
[dir="rtl"] #joker-coins-landing .jcl-heading::before { right: 0; left: auto; }
#joker-coins-landing .jcl-heading h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
#joker-coins-landing .jcl-heading p { margin: 5px 0 0; color: #9a9aa3; font-size: 11px; }
#joker-coins-landing .jcl-heading-centered { width: max-content; max-width: 100%; margin-inline: auto; text-align: center; }

#joker-coins-landing .jcl-steps { display: grid; grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr); align-items: center; }
#joker-coins-landing .jcl-step { display: flex; flex-direction: column; padding: 24px 27px; border: 1px solid var(--jcl-line); border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(17,17,24,.025); }
#joker-coins-landing .jcl-step-number { color: #ffdadd; font-size: 24px; font-weight: 900; }
#joker-coins-landing .jcl-step-icon { height: 64px; margin-top: 10px; color: #777781; font-size: 32px; line-height: 64px; }
#joker-coins-landing .jcl-step-coin { width: 70px; height: 70px; margin-top: 8px; object-fit: contain; }
#joker-coins-landing .jcl-step h3 { margin: 8px 0 10px; font-size: 15px; font-weight: 900; }
#joker-coins-landing .jcl-step > p { margin: 0; color: var(--jcl-muted); font-size: 11px; line-height: 1.7; }
#joker-coins-landing .jcl-callout { margin-top: 18px; padding: 10px 12px; border-radius: 5px; background: #f8f8fb; }
#joker-coins-landing .jcl-callout small { display: block; margin-bottom: 3px; color: #aaaab2; font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
#joker-coins-landing .jcl-callout strong { display: block; color: var(--jcl-red); font-size: 10px; }
#joker-coins-landing .jcl-arrow { color: #ffabb0; font-size: 18px; font-weight: 900; text-align: center; }
[dir="rtl"] #joker-coins-landing .jcl-arrow { transform: scaleX(-1); }

#joker-coins-landing .jcl-equation { display: grid; grid-template-columns: 1fr 46px 1fr 46px 1fr; align-items: center; width: min(100%,860px); margin-inline: auto; }
#joker-coins-landing .jcl-equation > span { color: #ffb0b5; font-size: 18px; font-weight: 900; text-align: center; }
[dir="rtl"] #joker-coins-landing .jcl-equation > span { transform: scaleX(-1); }
#joker-coins-landing .jcl-equation-card { display: flex; min-height: 166px; flex-direction: column; align-items: center; justify-content: center; padding: 22px; border: 1px solid var(--jcl-line); border-radius: 9px; text-align: center; }
#joker-coins-landing .jcl-equation-card > i { margin-bottom: 14px; color: #8b8b93; font-size: 27px; }
#joker-coins-landing .jcl-equation-card > img { width: 68px; height: 68px; margin-bottom: 3px; object-fit: contain; }
#joker-coins-landing .jcl-equation-card strong { font-size: 22px; font-weight: 900; }
#joker-coins-landing .jcl-equation-card small { margin-top: 5px; color: #9c9ca5; font-size: 9px; }
#joker-coins-landing .jcl-equation-coin { border-color: #f3e2ac; background: #fffdf5; }
#joker-coins-landing .jcl-equation-coin strong { color: var(--jcl-gold); }
#joker-coins-landing .jcl-equation-saving { border-color: #f5dadd; background: #fff8f8; }
#joker-coins-landing .jcl-equation-saving > i, #joker-coins-landing .jcl-equation-saving strong { color: var(--jcl-red); }
#joker-coins-landing .jcl-rate-note { margin: 16px 0 0; padding: 10px 16px; border-radius: 5px; background: #f8f8fb; color: #94949c; font-size: 9px; text-align: center; }

#joker-coins-landing .jcl-tiers { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
#joker-coins-landing .jcl-tier { position: relative; display: flex; min-height: 385px; flex-direction: column; padding: 28px 24px 0; overflow: hidden; border: 1px solid var(--jcl-line); border-radius: 10px; background: #fff; }
#joker-coins-landing .jcl-tier > i { width: 46px; height: 46px; border-radius: 50%; font-size: 23px; line-height: 46px; text-align: center; }
#joker-coins-landing .jcl-tier-silver > i { background: #f0f1f3; color: #93969d; }
#joker-coins-landing .jcl-tier-gold { border-color: #f4e7b9; background: #fffef8; }
#joker-coins-landing .jcl-tier-gold > i { background: #fff3c8; color: var(--jcl-gold); }
#joker-coins-landing .jcl-tier-ultimate { border-color: #f7d6d9; background: #fff8f8; }
#joker-coins-landing .jcl-tier-ultimate > i { background: #ffe9eb; color: var(--jcl-red); }
#joker-coins-landing .jcl-popular { position: absolute; top: 14px; right: 14px; padding: 4px 8px; border-radius: 12px; background: #ffc400; color: #6d4a00; font-size: 7px; font-weight: 900; text-transform: uppercase; }
[dir="rtl"] #joker-coins-landing .jcl-popular { right: auto; left: 14px; }
#joker-coins-landing .jcl-tier h3 { margin: 13px 0 3px; font-size: 20px; font-weight: 900; }
#joker-coins-landing .jcl-tier-gold h3 { color: var(--jcl-gold); }
#joker-coins-landing .jcl-tier-ultimate h3 { color: var(--jcl-red); }
#joker-coins-landing .jcl-tier-rate { margin: 0 0 13px !important; color: #3c3c43 !important; font-size: 10px !important; font-weight: 700; }
#joker-coins-landing .jcl-tier > p { margin: 0; color: var(--jcl-muted); font-size: 9px; line-height: 1.6; }
#joker-coins-landing .jcl-tier ul { display: grid; gap: 7px; margin: 17px 0 20px; padding: 0; list-style: none; }
#joker-coins-landing .jcl-tier li { position: relative; padding-inline-start: 15px; font-size: 9px; }
#joker-coins-landing .jcl-tier li::before { position: absolute; left: 0; color: #111; font-family: "Font Awesome 6 Free"; font-size: 7px; font-weight: 900; content: "\f00c"; }
[dir="rtl"] #joker-coins-landing .jcl-tier li::before { right: 0; left: auto; }
#joker-coins-landing .jcl-tier > a { display: grid; min-height: 43px; margin: auto -24px 0; place-items: center; background: var(--jcl-red); color: #fff; font-size: 10px; font-weight: 900; text-transform: capitalize; }

#joker-coins-landing .jcl-example-section { margin-top: 20px; padding: 56px 16px 16px; border-radius: 12px; background: #f8f8fc; }
#joker-coins-landing .jcl-example { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#joker-coins-landing .jcl-summary-card, #joker-coins-landing .jcl-breakdown-card { padding: 25px; border: 1px solid var(--jcl-line); border-radius: 9px; background: #fff; }
#joker-coins-landing .jcl-overline { font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
#joker-coins-landing .jcl-product { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; margin: 18px 0 12px; padding-bottom: 16px; border-bottom: 1px solid var(--jcl-line); }
#joker-coins-landing .jcl-product > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 6px; background: #e9f2ff; color: #075eb5; font-size: 21px; }
#joker-coins-landing .jcl-product strong, #joker-coins-landing .jcl-product small { display: block; }
#joker-coins-landing .jcl-product strong { font-size: 10px; }
#joker-coins-landing .jcl-product small { margin-top: 3px; color: #a0a0a8; font-size: 8px; }
#joker-coins-landing .jcl-product > b { font-size: 11px; }
#joker-coins-landing .jcl-summary-card dl { margin: 0; }
#joker-coins-landing .jcl-summary-card dl > div { display: flex; justify-content: space-between; padding: 6px 0; color: #777781; font-size: 9px; }
#joker-coins-landing .jcl-summary-card dt, #joker-coins-landing .jcl-summary-card dd { margin: 0; }
#joker-coins-landing .jcl-green { color: #2fb578 !important; }
#joker-coins-landing .jcl-summary-card .jcl-total { margin-top: 5px; padding-top: 12px; border-top: 1px solid var(--jcl-line); color: #111; font-size: 11px; font-weight: 900; }
#joker-coins-landing .jcl-summary-card .jcl-total dd { color: var(--jcl-red); }
#joker-coins-landing .jcl-earned { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 9px 11px; border-radius: 6px; background: #fff8e9; color: #7b652a; font-size: 9px; }
#joker-coins-landing .jcl-earned img { width: 28px; height: 28px; object-fit: contain; }
#joker-coins-landing .jcl-breakdown-card h3 { margin: 0 0 20px; font-size: 17px; font-weight: 900; }
#joker-coins-landing .jcl-breakdown-card ol { display: grid; gap: 14px; margin: 0 0 24px; padding: 0; list-style: none; }
#joker-coins-landing .jcl-breakdown-card li { display: flex; align-items: center; gap: 9px; color: #707079; font-size: 10px; }
#joker-coins-landing .jcl-breakdown-card li > span { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--jcl-red); color: #fff; font-size: 8px; font-weight: 900; }
#joker-coins-landing .jcl-breakdown-card .jcl-btn { width: 100%; }

#joker-coins-landing .jcl-faq-list { border-top: 1px solid var(--jcl-line); }
#joker-coins-landing .jcl-faq details { border-bottom: 1px solid var(--jcl-line); }
#joker-coins-landing .jcl-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 4px; cursor: pointer; font-size: 11px; font-weight: 800; list-style: none; }
#joker-coins-landing .jcl-faq summary::-webkit-details-marker { display: none; }
#joker-coins-landing .jcl-faq summary i { color: #9d9da5; transition: transform .2s ease; }
#joker-coins-landing .jcl-faq details[open] summary i { transform: rotate(180deg); }
#joker-coins-landing .jcl-faq details p { max-width: 840px; margin: -6px 0 20px; padding: 0 4px; color: var(--jcl-muted); font-size: 10px; line-height: 1.7; }

#joker-coins-landing .jcl-reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
#joker-coins-landing .jcl-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1024px) {
    #joker-coins-landing .jcl-hero-grid { grid-template-columns: minmax(0,1fr) 380px; }
    #joker-coins-landing .jcl-coin-scene > img { width: 285px; }
    #joker-coins-landing .jcl-float-tier { right: -4%; }
    #joker-coins-landing .jcl-steps { grid-template-columns: 1fr; gap: 14px; }
    #joker-coins-landing .jcl-step { min-height: 0; }
    #joker-coins-landing .jcl-callout { margin-top: 22px; }
    #joker-coins-landing .jcl-arrow { display: none; }
}

@media (max-width: 780px) {
    #joker-coins-landing .jcl-wrap { width: min(100% - 32px,1240px); }
    #joker-coins-landing .jcl-hero-grid { grid-template-columns: 1fr; padding-top: 5px; }
    #joker-coins-landing .jcl-hero-copy { max-width: 100%; padding: 44px 0 10px; }
    #joker-coins-landing .jcl-hero-text { max-width: 570px; }
    #joker-coins-landing .jcl-coin-scene { min-height: 360px; }
    #joker-coins-landing .jcl-coin-scene > img { width: 290px; }
    #joker-coins-landing .jcl-float-earned { left: 10%; }
    #joker-coins-landing .jcl-float-value { left: 14%; }
    #joker-coins-landing .jcl-float-tier { right: 7%; }
    #joker-coins-landing .jcl-section { padding-top: 50px; }
    #joker-coins-landing .jcl-equation { grid-template-columns: 1fr; gap: 8px; }
    #joker-coins-landing .jcl-equation > span, [dir="rtl"] #joker-coins-landing .jcl-equation > span { line-height: 1; transform: rotate(90deg); }
    #joker-coins-landing .jcl-equation-card { min-height: 130px; }
    #joker-coins-landing .jcl-tiers, #joker-coins-landing .jcl-example { grid-template-columns: 1fr; }
    #joker-coins-landing .jcl-tier { min-height: 340px; }
}

@media (max-width: 480px) {
    #joker-coins-landing .jcl-hero h1 { font-size: 42px; }
    #joker-coins-landing .jcl-eyebrow { font-size: 9px; }
    #joker-coins-landing .jcl-hero-text { font-size: 12px; }
    #joker-coins-landing .jcl-actions { flex-direction: column; }
    #joker-coins-landing .jcl-btn { width: 100%; }
    #joker-coins-landing .jcl-coin-scene { min-height: 330px; }
    #joker-coins-landing .jcl-coin-scene > img { width: 250px; }
    #joker-coins-landing .jcl-float-card { min-width: 82px; padding: 10px; }
    #joker-coins-landing .jcl-float-card strong { font-size: 12px; }
    #joker-coins-landing .jcl-float-card small { font-size: 7px; }
    #joker-coins-landing .jcl-float-earned { top: 22%; left: 0; }
    #joker-coins-landing .jcl-float-value { bottom: 21%; left: 4%; }
    #joker-coins-landing .jcl-float-tier { right: 0; }
    #joker-coins-landing .jcl-step, #joker-coins-landing .jcl-tier, #joker-coins-landing .jcl-summary-card, #joker-coins-landing .jcl-breakdown-card { padding-inline: 19px; }
    #joker-coins-landing .jcl-tier > a { margin-inline: -19px; }
    #joker-coins-landing .jcl-product { grid-template-columns: 42px 1fr; }
    #joker-coins-landing .jcl-product > b { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
    #joker-coins-landing .jcl-reveal, #joker-coins-landing .jcl-btn { transition: none; }
}