/* Homepage only. Loaded after imported styles and shared mobile fixes. */
.promo .x { display: grid; place-items: center; padding: 0; line-height: 1; color: inherit; }
.promo .x svg { display: block; width: 14px; height: 14px; }
.home-redesign { --radius: 16px; --radius-sm: 16px; --shadow: 0 4px 16px rgb(15 27 45 / 5%); }
.home-redesign .container { width: min(1200px, calc(100% - 48px)); }
.home-redesign [data-reveal] { opacity: 1; transform: none; transition: none; }
.home-redesign .section { padding-block: 72px; }
.home-redesign .hero { padding-block: 64px 72px; background: #fff; }
.home-redesign .hero::before { content: ''; position: absolute; inset-block-start: 4%; inset-inline-end: 0; width: min(65vw, 650px); height: 650px; pointer-events: none; background: radial-gradient(ellipse, rgb(117 164 255 / 13%), transparent 65%); animation: home-glow 12s ease-in-out infinite alternate; }
@keyframes home-glow { from { transform: translateY(-15px) scale(.9); opacity: .55; } to { transform: translateY(15px) scale(1.08); opacity: 1; } }
.home-redesign .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 64px; }
.home-redesign .hero-copy { text-align: start; order: 0; }
.home-redesign .kicker { color: #2c63e9; letter-spacing: .1em; font-size: 12px; }
.home-redesign h1 { font-size: clamp(40px, 4.5vw, 64px); line-height: 1.12; margin-block: 20px; text-wrap: balance; }
.home-redesign .sub { max-width: 480px; font-size: 18px; line-height: 1.75; }
.home-redesign .hero-ctas, .home-redesign .home-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.home-redesign .hero-ctas { margin-block: 28px 12px; }
.home-redesign .btn { min-height: 48px; padding: 12px 22px; border-radius: 12px; box-shadow: none; gap: 10px; font-size: 15px; transform: none; }
.home-redesign .btn-primary { background: #2c63e9; }
.home-redesign .btn-primary:hover { background: #1d4ed8; }
.home-redesign .btn-ghost { background: #fff; color: #24334b; border: 1px solid #d4dbe8; }
.home-redesign .btn-ghost:hover { background: #f4f6fb; }
.home-redesign .home-download-note { color: #65718a; font-size: 13px; text-align: start; }
[dir="rtl"] .home-redesign .home-download-note { text-align: right; }
.home-redesign .hero-visual { order: 1; gap: 20px; min-width: 0; width: 100%; }
.home-redesign .home-phone-stage { width: 100%; display: grid; place-items: center; background: radial-gradient(ellipse, #e8efff 0%, #f4f7ff 45%, transparent 71%); padding: 12px; }
.home-redesign .phone { width: 226px; max-width: 100%; border-width: 7px; border-radius: 30px; box-shadow: 0 10px 24px rgb(15 27 45 / 9%); animation: home-phone-float 6s ease-in-out infinite; }
@keyframes home-phone-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.home-redesign .phone img { width: 100%; height: auto; border-radius: 22px; }
.home-redesign .qr-card { position: static; inset: auto; width: auto; max-width: 100%; padding: 10px 18px 10px 10px; display: flex; align-items: center; gap: 14px; border: 1px solid #e6eaf2; border-radius: 16px; background: white; box-shadow: none; animation: none; text-align: start; transform: none; }
[dir="rtl"] .home-redesign .qr-card { padding: 10px 10px 10px 18px; }
.home-redesign .qr-card img { width: 88px; height: 88px; aspect-ratio: 1; object-fit: contain; border-radius: 0; flex: 0 0 88px; margin: 0; }
.home-redesign .qr-card strong { display: block; font-size: 14px; }
.home-redesign .qr-card small { display: block; font-size: 12px; color: #65718a; margin-top: 4px; }
.home-redesign .sec-head { gap: 24px; align-items: end; margin-bottom: 28px; }
.home-redesign h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.25; margin-top: 10px; text-wrap: balance; }
.home-redesign .sec-head p, .home-redesign .section-head p { color: #56627a; margin-top: 12px; max-width: 620px; }
.home-redesign .link-more { flex-shrink: 0; min-height: 44px; gap: 10px; display: inline-flex; align-items: center; }
.home-redesign .filters { gap: 8px; margin-bottom: 24px; flex-wrap: nowrap; overflow-x: auto; padding: 3px 3px 8px; }
.home-redesign .chip { min-height: 44px; flex-shrink: 0; box-shadow: none; }
.home-redesign .chip.active { background: #2c63e9; }
.home-redesign .game-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.home-redesign .home-category-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #dce3ef; font-size: 13px; }
.home-redesign .home-category-links > span { color: #56627a; }
.home-redesign .home-category-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #2459d2; font-weight: 600; }
.home-redesign .game-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: #fff; border-radius: 16px; box-shadow: none; min-width: 0; }
.home-redesign .game-grid .game-card { animation: home-card-in .4s ease backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes home-card-in { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
.home-redesign .game-card:hover { transform: translateY(-2px); border-color: #b7c9f4; box-shadow: none; }
.home-redesign .gcover { grid-column: 1 / -1; aspect-ratio: 1; animation: none; background: #edf1f8; }
.home-redesign .gcover img { opacity: 1; object-fit: cover; transform: none; }
.home-redesign .game-card:hover .gcover img { transform: none; }
.home-redesign .glabel { position: static; padding: 16px; background: none; color: #18243b; opacity: 1; transform: none; font-size: 15px; align-self: center; overflow-wrap: anywhere; }
.home-redesign .play-btn, .home-redesign .game-card:hover .play-btn { position: static; transform: none; opacity: 1; align-self: center; margin-inline-end: 12px; background: #edf3ff; color: #2459d2; box-shadow: none; border-radius: 8px; padding: 7px 12px; font-size: 12px; }
.home-redesign .gtag { top: 12px; inset-inline-start: 12px; inset-inline-end: auto; }
.home-redesign .section-head { text-align: start; margin-bottom: 28px; }
.home-redesign .he-grid { gap: 24px; }
.home-redesign .he-card { display: flex; flex-direction: column; align-items: stretch; border-radius: 16px; box-shadow: none; border: 1px solid #e6eaf2; background: #fff; color: #18243b; }
.home-redesign .he-card:hover { transform: translateY(-2px); box-shadow: none; }
.home-redesign .he-card::after { display: none; }
.home-redesign .he-card > img { position: static; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; transition: transform .35s ease; }
.home-redesign .he-body { padding: 20px; }
.home-redesign .he-body h3 { margin-block: 12px 8px; }
.home-redesign .he-body p { color: #56627a; }
.home-redesign .he-cta { display: inline-flex; align-items: center; min-height: 44px; color: #2459d2; }
.home-redesign .ticker { padding-block: 32px; }
.home-redesign .ticker-head { margin-bottom: 24px; }
.home-redesign .game-pill { box-shadow: none; }
.home-redesign .ticker-row:hover .ticker-track { animation-play-state: running; }
.home-redesign .ticker-track:has(:focus-visible) { animation-play-state: paused; }
.home-redesign .home-surprise { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid #d4dff5; border-radius: 999px; background: #fff; color: #2459d2; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .2s, transform .2s; }
.home-redesign .home-surprise { margin-block: -8px 24px; }
.home-redesign .home-surprise svg { width: 18px; height: 18px; transition: transform .3s; }
.home-redesign .home-surprise:hover { background: #e9f0ff; }
.home-redesign .home-surprise:active { transform: scale(.97); }
.home-redesign .home-surprise:hover svg { transform: rotate(90deg); }
.home-redesign .feat .ic, .home-redesign .step .num { transition: transform .25s, background .25s; }
.home-redesign .feat-grid { gap: 28px; }
.home-redesign .feat, .home-redesign .step { padding: 0; background: none; border: none; box-shadow: none; border-radius: 0; }
.home-redesign .feat:hover { transform: none; box-shadow: none; }
.home-redesign .feat h3, .home-redesign .step h3 { line-height: 1.4; }
.home-redesign .trust-row { width: 100%; gap: 24px; margin-top: 40px; padding-block: 28px 0; border-top: 1px solid #dce3ef; }
.home-redesign .trust-item { align-items: start; gap: 10px; }
.home-redesign .trust-item span { color: #65718a; }
.home-redesign .steps { gap: 32px; }
.home-redesign .step .num { background: #edf3ff; color: #2c63e9; }
.home-redesign .home-final-cta { margin-top: 36px; padding: 28px; border-radius: 16px; background: #edf3ff; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.home-redesign .home-final-cta h3 { font-size: 22px; line-height: 1.4; }
.home-redesign :is(a, button, [role="button"]):focus-visible { outline: 3px solid #2c63e9; outline-offset: 3px; }
[dir="rtl"] .home-redesign .kicker { letter-spacing: 0; }
.home-redesign :is(.btn, .chip, .game-card, .he-card, .game-pill) { transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .home-redesign .ticker-row:hover .ticker-track { animation-play-state: paused; }
  .home-redesign :is(.btn, .chip):hover { transform: translateY(-2px); }
  .home-redesign :is(.game-card, .he-card):hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgb(15 27 45 / 6%); }
  .home-redesign .game-card:hover .gcover img { transform: scale(1.025); }
  .home-redesign .he-card:hover > img { transform: scale(1.035); }
  .home-redesign .feat:hover .ic { transform: translateY(-3px) rotate(-5deg); background: #dfebff; }
  .home-redesign .step:hover .num { transform: scale(1.1); background: #dfebff; }
  .home-redesign .game-card:is(:hover, :focus-visible) .play-btn { background: #2c63e9; color: white; }
}
.home-redesign :is(.btn, .chip, .game-card, .he-card, .game-pill):active { transform: scale(.98); }
@media (max-width: 900px) {
  .home-redesign .container { width: calc(100% - 32px); }
  .home-redesign .section, .home-redesign .hero { padding-block: 40px; }
  .home-redesign .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-redesign .hero-copy { max-width: 600px; }
  .home-redesign h1 { font-size: clamp(36px, 7vw, 54px); }
  .home-redesign .sub { font-size: 16px; }
  .home-redesign .hero-visual { max-width: 440px; margin-inline: auto; gap: 12px; }
  .home-redesign .phone { width: 210px; }
  .home-redesign .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .home-redesign .sec-head { align-items: start; flex-direction: column; gap: 8px; margin-bottom: 20px; }
  .home-redesign .glabel { font-size: 13px; padding: 12px 10px 6px; grid-column: 1 / -1; }
  .home-redesign .play-btn { margin: 0 10px 12px; justify-self: start; }
  .home-redesign .game-card:hover .play-btn { margin-inline-end: 10px; }
  .home-redesign .he-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home-redesign .feat-grid, .home-redesign .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-redesign .home-final-cta { flex-direction: column; align-items: start; padding: 24px; }
}
@media (max-width: 540px) {
  .home-redesign .hero-ctas, .home-redesign .home-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .home-redesign .btn { width: 100%; justify-content: center; }
  .home-redesign .steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-redesign .step { padding-inline-start: 58px; position: relative; }
  .home-redesign .step .num { position: absolute; inset-inline-start: 0; top: 0; }
  .home-redesign .feat-grid, .home-redesign .trust-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-redesign .feat { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .home-redesign .feat .ic { width: 44px; height: 44px; grid-row: span 2; margin: 0; }
  .home-redesign .feat p { grid-column: 2; }
}
@media (max-width: 359px) {
  .home-redesign .game-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  /* Keep the explicitly requested original marquee; reduce decorative motion elsewhere. */
  .home-redesign *:not(.ticker-track), .home-redesign *::before, .home-redesign *::after { animation: none !important; transition: none !important; }
  .home-redesign :is(.phone, .btn, .chip, .game-card, .he-card, .game-pill, .gcover img) { transform: none !important; }
  .home-redesign :is(.he-card > img, .feat .ic, .step .num, .home-surprise, .home-surprise svg) { transform: none !important; }
}
