/* =====================================================================
Shooot Landing Page — Styles
---------------------------------------------------------------------
Bilingual (Arabic default / English) marketing landing page for the
Shooot football-prediction game, powered by LikeCard.
Structure of this file:
1. Design tokens (CSS custom properties: colors, fonts)
2. Base / reset
3. Layout primitives (.wrap, section spacing)
4. Navigation (desktop nav + mobile burger menu)
5. Hero (headline, store badges, comet animation, preview card)
6. "The idea" section
7. "How to play" steps
8. Daily / earn band (two co-primary messages)
9. Prizes (prize-type cards)
10. Availability, final CTA, footer
11. Terms & Conditions modal (currently unused; links open hosted
pages instead — kept for fallback)
12. RTL overrides
13. Responsive: mobile refinement (max-width 560px / 360px)
RTL/LTR: layout uses logical properties (inset-inline-*, margin-inline-*)
so the same CSS serves both directions. The [dir="rtl"] blocks handle
the few cases logical properties cannot.
NOTE (planned infra work, not done here):
Images are still embedded as base64 in index.html. They are slated to
move to hosted, optimized files (WebP/AVIF) on a CDN. No CSS change is
required for that move; only the ![]()
values in index.html change.
===================================================================== */
:root{
--plum-900:#320033;--plum-700:#3f1651;--magenta-500:#74006f;
--orange-400:#f79f5b;--cream-50:#fff5ee;--white:#ffffff;
--txt-dark:#320033;--txt-dark-2:rgba(63,22,81,0.78);
--radius-card:16px;--radius-sm:10px;--radius-pill:999px;--maxw:1120px;
--shadow-card:0 12px 28px rgba(50,0,51,0.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Cairo',system-ui,sans-serif;background:var(--cream-50);color:var(--txt-dark);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media(max-width:560px){.wrap{padding:0 18px}}
.display{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:0.5px;line-height:1.04;text-transform:none}
[dir="rtl"] .display{font-family:'Cairo',sans-serif;font-weight:900;letter-spacing:0}
/* NAV */
header.nav{position:sticky;top:0;z-index:60;background:rgba(50,0,51,0.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.08)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:11px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px}
@media(max-width:560px){.nav-inner{padding:10px 18px}}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:38px;width:auto;display:block}
@media(max-width:560px){.brand img{height:30px}}
.nav-links{display:flex;gap:24px;margin-inline-start:auto;margin-inline-end:6px}
.nav-links a{color:rgba(255,255,255,0.8);font-size:14px;font-weight:600;white-space:nowrap}
.nav-links a:hover{color:#fff}
@media(max-width:820px){.nav-links{display:none}}
.nav-actions{display:flex;align-items:center;gap:10px}
.lang-btn{background:transparent;color:rgba(255,255,255,0.85);border:1px solid rgba(255,255,255,0.25);border-radius:var(--radius-pill);padding:7px 15px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Cairo';white-space:nowrap}
@media(max-width:560px){.lang-btn{padding:6px 13px;font-size:12.5px}}
.lang-btn:hover{background:rgba(255,255,255,0.1);color:#fff}
.nav-cta{background:var(--orange-400);color:var(--plum-900);font-weight:800;font-size:14px;padding:9px 18px;border-radius:var(--radius-pill);white-space:nowrap;transition:transform .15s,filter .15s}
.nav-cta:hover{transform:translateY(-1px);filter:brightness(1.05)}
/* mobile: keep CTA visible, smaller */
@media(max-width:560px){.nav-cta{padding:8px 14px;font-size:13px}}
/* burger */
.burger{display:none;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;border:1px solid rgba(255,255,255,0.22);border-radius:10px;background:transparent;cursor:pointer;flex:none;padding:0;order:-1}
.burger span{display:block;width:18px;height:2px;background:#fff;margin:0 auto;border-radius:2px;transition:transform .2s,opacity .2s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:820px){.burger{display:flex}}
/* slide-down menu */
.mobile-menu{display:none;position:absolute;top:100%;inset-inline-start:0;inset-inline-end:0;background:var(--plum-900);border-bottom:1px solid rgba(255,255,255,0.1);box-shadow:0 16px 30px rgba(20,0,20,0.4);overflow:hidden;max-height:0;transition:max-height .26s ease}
@media(max-width:820px){.mobile-menu{display:block}}
.mobile-menu.open{max-height:260px}
.mobile-menu nav{display:flex;flex-direction:column;padding:6px 0}
.mobile-menu a{color:rgba(255,255,255,0.88);font-size:15px;font-weight:600;padding:14px 24px;border-bottom:1px solid rgba(255,255,255,0.05)}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:active{background:rgba(255,255,255,0.06)}
/* HERO */
.hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(1100px 480px at 78% -8%, rgba(116,0,111,0.55), transparent 60%),radial-gradient(760px 460px at 10% 116%, rgba(247,159,91,0.18), transparent 55%),linear-gradient(165deg,var(--plum-900) 0%, var(--plum-700) 92%)}
.hero-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:48px 24px 52px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center}
.hero-copy{min-width:0;max-width:100%}
@media(max-width:880px){.hero-inner{grid-template-columns:1fr;padding:24px 20px 26px;gap:16px;text-align:center}}
@media(max-width:560px){.hero-inner{padding:38px 18px 48px}}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;color:var(--orange-400);background:linear-gradient(180deg,rgba(247,159,91,0.14),rgba(247,159,91,0.06));border:1px solid rgba(247,159,91,0.38);padding:8px 16px;border-radius:var(--radius-pill);margin-bottom:22px}
[dir="rtl"] .eyebrow{text-transform:none;letter-spacing:0}
@media(max-width:880px){.eyebrow{margin-inline:auto}}
@media(max-width:560px){.eyebrow{font-size:10px;padding:6px 12px;margin-bottom:16px;white-space:normal;text-align:center;line-height:1.3;max-width:100%}}
.eyebrow .spark{flex:none;font-size:14px;line-height:1;display:inline-flex;align-items:center}
h1.hero-title{font-size:clamp(32px,5.4vw,66px);margin-bottom:18px}
h1.hero-title .br2{color:var(--orange-400);display:block}
@media(max-width:560px){h1.hero-title{line-height:1.08}}
.hero-sub{font-size:clamp(14.5px,2vw,19px);color:rgba(255,255,255,0.85);max-width:min(32em,100%);margin-bottom:22px;font-weight:500;word-wrap:break-word}
@media(max-width:880px){.hero-sub{margin-inline:auto}}
@media(max-width:560px){.hero-sub{margin-bottom:22px}}
/* store badges (official-style) */
.store-badges{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:880px){.store-badges{justify-content:center}}
@media(max-width:560px){.store-badges{flex-direction:column;gap:10px;align-items:center}}
.store-badge{display:inline-flex;align-items:center;gap:10px;background:#000;border:1px solid rgba(255,255,255,0.35);border-radius:9px;padding:8px 14px;min-width:150px;transition:transform .15s}
.store-badge:hover{transform:translateY(-2px)}
.store-badge .ic{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center}
.store-badge .ic svg{width:100%;height:100%}
.store-badge .tx{display:flex;flex-direction:column;line-height:1.05;color:#fff}
.store-badge .tx .s{font-size:10px;font-weight:500;font-family:'Cairo';letter-spacing:0.01em}
.store-badge .tx .b{font-size:17px;font-weight:600;font-family:'Cairo';letter-spacing:0.01em}
@media(max-width:560px){.store-badge{width:200px;justify-content:center}}
.hero-fine{margin-top:15px;font-size:12px;color:rgba(255,255,255,0.5)}
@media(max-width:880px){.hero-fine{margin-inline:auto}}
/* hero visual: real comet-ball + prediction chip */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:270px}
@media(max-width:880px){.hero-visual{min-height:auto;margin-top:4px;flex-direction:column;width:100%}}
@media(max-width:560px){.hero-visual{min-height:auto}}
.comet{width:240px;max-width:54vw;height:auto;animation:shootIn 1.15s cubic-bezier(.18,.7,.3,1) both}
[dir="rtl"] .comet{transform:scaleX(-1);animation:shootInR 1.15s cubic-bezier(.18,.7,.3,1) both}
@keyframes shootIn{0%{opacity:0;transform:translate(130px,-95px) rotate(18deg) scale(0.65)}70%{opacity:1}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes shootInR{0%{opacity:0;transform:scaleX(-1) translate(130px,-95px) rotate(18deg) scale(0.65)}70%{opacity:1}100%{opacity:1;transform:scaleX(-1) translate(0,0) rotate(0) scale(1)}}
@media(max-width:880px){.comet{width:180px;max-width:44vw}}
@media(max-width:560px){.comet{width:150px;max-width:40vw}}
@media(prefers-reduced-motion:reduce){.comet{animation:none!important}}
.pc-preview{position:absolute;top:11px;inset-inline-end:11px;font-size:9px;font-weight:800;letter-spacing:0.03em;text-transform:uppercase;color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);padding:3px 8px;border-radius:999px;line-height:1;backdrop-filter:blur(4px)}
[dir="rtl"] .pc-preview{text-transform:none;letter-spacing:0;font-size:10px}
.pred-card{position:absolute;bottom:10px;inset-inline-start:-6px;width:264px;max-width:88%;background:linear-gradient(160deg,rgba(63,22,81,0.92),rgba(50,0,51,0.92));border:1px solid rgba(255,255,255,0.14);border-radius:18px;padding:16px 16px 14px;backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(20,0,20,0.5);animation:fadeUp .6s ease 1s both}
@media(max-width:880px){.pred-card{position:relative;inset:auto;margin:14px auto 0;width:min(300px,100%)}}
@media(max-width:560px){.pred-card{width:100%;max-width:320px;padding:14px 14px 13px}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.pc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.pc-team{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;min-width:0}
.pc-badge{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,0.25)}
.pc-badge.a{background:radial-gradient(circle at 35% 30%,#9a4d94,#74006f)}
.pc-badge.b{background:radial-gradient(circle at 35% 30%,#ffbe7d,#f79f5b)}
.pc-team span{font-size:11px;color:rgba(255,255,255,0.82);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64px}
.pc-score{display:flex;align-items:center;gap:6px}
.pc-box{width:34px;height:42px;border-radius:9px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:21px;color:#fff;border:1px solid rgba(255,255,255,0.22);font-family:'Anton'}
.pc-colon{color:rgba(255,255,255,0.4);font-weight:800;font-size:18px}
.pc-cd{text-align:center;font-size:11px;color:rgba(255,255,255,0.6);margin-bottom:12px;white-space:nowrap}
.pc-cd b{color:#fff;font-weight:800;letter-spacing:0.5px}
.pc-submit{display:block;width:100%;text-align:center;background:rgba(247,159,91,0.20);color:rgba(255,255,255,0.5);font-weight:800;font-size:14px;padding:11px;border-radius:11px;border:1px solid rgba(247,159,91,0.28);font-family:'Cairo';cursor:default;pointer-events:none}
/* SECTION SHELL */
section.block{padding:80px 0}
@media(max-width:880px){section.block{padding:56px 0}}
@media(max-width:560px){section.block{padding:44px 0}}
.sec-eyebrow{font-size:13px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--magenta-500);margin-bottom:11px}
[dir="rtl"] .sec-eyebrow{text-transform:none;letter-spacing:0}
.block.dark .sec-eyebrow{color:var(--orange-400)}
h2.sec-title{font-size:clamp(26px,3.8vw,46px);margin-bottom:12px;color:var(--plum-900)}
.block.dark h2.sec-title{color:#fff}
.sec-lead{font-size:clamp(16px,2vw,20px);color:var(--txt-dark-2);max-width:40em;font-weight:500}
.block.dark .sec-lead{color:rgba(255,255,255,0.82)}
.trail{height:4px;width:70px;border-radius:4px;background:linear-gradient(90deg,var(--orange-400),rgba(247,159,91,0));margin-bottom:20px}
[dir="rtl"] .trail{background:linear-gradient(270deg,var(--orange-400),rgba(247,159,91,0))}
/* DAILY GUESS BAND */
.daily{background:linear-gradient(180deg,#fff1e3 0%,#fbe4cf 100%);border-top:1px solid rgba(247,159,91,0.30);border-bottom:1px solid rgba(247,159,91,0.35);padding:40px 0}
.daily-inner{max-width:980px;margin:0 auto;padding:0 24px;text-align:start}
@media(max-width:560px){.daily-inner{flex-direction:column;gap:12px;text-align:center;padding:0 18px}}
.daily-icon{flex:none;width:50px;height:50px;border-radius:14px;background:linear-gradient(160deg,#fe8d2a,#f48320);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(244,131,32,0.35)}
.daily-icon-2{background:linear-gradient(160deg,#9b2fa0,#74006f);box-shadow:0 8px 20px rgba(116,0,111,0.30)}
.daily-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:680px){.daily-cols{grid-template-columns:1fr;gap:20px}}
.daily-col{display:flex;align-items:flex-start;gap:15px}
.daily-col-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.daily-col-text h3{font-size:clamp(17px,2vw,20px);font-weight:800;color:var(--plum-900);line-height:1.3}
.daily-col-text p{font-size:clamp(13.5px,1.6vw,14.5px);color:rgba(63,22,81,0.74);font-weight:500;line-height:1.55}
.daily-icon svg{width:28px;height:28px;color:#fff}
.daily-text{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.daily-text h3{font-size:clamp(18px,2.4vw,22px);font-weight:800;color:var(--plum-900);line-height:1.3;margin-bottom:2px}
.daily-text>p{font-size:clamp(14px,1.7vw,15px);color:rgba(63,22,81,0.74);font-weight:500;line-height:1.6;max-width:62ch}
.daily-divider{height:1px;background:rgba(63,22,81,0.12);margin:22px 0 16px}
.daily-bonus{font-size:clamp(13px,1.6vw,14px);color:rgba(63,22,81,0.66);font-weight:500;line-height:1.6;max-width:62ch}
.daily-bonus b{color:var(--plum-900);font-weight:800}
.daily-bonus .bonus-tag{display:inline-block;vertical-align:middle;background:var(--magenta-500);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px;margin-inline-end:8px}
.daily-text h3 .hl{color:#e0731a}
/* WHAT */
.what{background:var(--cream-50)}
.what-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:6px}
@media(max-width:880px){.what-grid{grid-template-columns:1fr;gap:26px}}
.what-points{display:flex;flex-direction:column;gap:16px}
.wp{display:flex;gap:13px;align-items:flex-start}
.wp .ic{flex:none;width:40px;height:40px;border-radius:11px;background:rgba(116,0,111,0.10);display:flex;align-items:center;justify-content:center;color:var(--magenta-500)}
.wp .ic svg{width:21px;height:21px}
.wp p{font-size:16px;color:var(--txt-dark-2)}
.wp p b{color:var(--plum-900);font-weight:800}
@media(max-width:560px){.wp p{font-size:15px}}
/* HOW */
.how{background:var(--white)}
.how-layout{display:grid;grid-template-columns:1.25fr 0.75fr;gap:48px;align-items:center;margin-top:6px}
@media(max-width:880px){.how-layout{grid-template-columns:1fr;gap:40px}}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--cream-50);border:1px solid rgba(50,0,51,0.07);border-radius:var(--radius-card);padding:20px 18px;transition:transform .15s,box-shadow .15s}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.step .num{font-family:'Anton';font-size:17px;color:#fff;width:34px;height:34px;border-radius:9px;background:var(--magenta-500);display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.step.hl{border-color:rgba(247,159,91,0.55);background:linear-gradient(180deg,#fff,#fff8f0)}
.step.hl .num{background:var(--orange-400);color:var(--plum-900)}
.step h3{font-size:16.5px;font-weight:800;margin-bottom:6px;color:var(--plum-900)}
.step p{font-size:14px;color:var(--txt-dark-2)}
.step .freetag{display:inline-block;margin-top:9px;font-size:11px;font-weight:800;color:var(--magenta-500);background:rgba(116,0,111,0.09);padding:3px 10px;border-radius:var(--radius-pill)}
.phone-frame{justify-self:center;width:240px;max-width:72vw;background:#1a0a1c;border-radius:34px;padding:10px;box-shadow:0 30px 70px rgba(50,0,51,0.35);border:1px solid rgba(255,255,255,0.08);position:relative}
.phone-frame::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:80px;height:6px;border-radius:6px;background:rgba(255,255,255,0.18);z-index:2}
.phone-frame img{width:100%;border-radius:26px;display:block}
.phone-caption{text-align:center;margin-top:16px;font-size:13px;color:var(--txt-dark-2);font-weight:600}
.how-terms{margin-top:26px;font-size:13px;color:var(--txt-dark-2)}
.how-terms a{color:var(--magenta-500);font-weight:700;text-decoration:underline;cursor:pointer}
/* PRIZES */
.prizes{background:var(--plum-900);position:relative;overflow:hidden}
.prizes::after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(247,159,91,0.16),transparent 66%);top:-180px;inset-inline-end:-130px;pointer-events:none}
.prize-grid{position:relative;margin-top:6px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.prize-grid{grid-template-columns:1fr}}
.prize-card{background:var(--plum-700);border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius-card);padding:32px 26px;text-align:center}
.prize-card .plabel{font-size:13px;color:rgba(255,255,255,0.6);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:13px;font-weight:700}
[dir="rtl"] .prize-card .plabel{text-transform:none;letter-spacing:0}
.prize-card .pamt{font-family:'Anton';font-size:clamp(40px,7vw,70px);color:#fff;line-height:1}
[dir="rtl"] .prize-card .pamt{font-family:'Cairo';font-weight:900}
.prize-card .pamt .cur{font-family:'Cairo';font-size:0.32em;color:var(--orange-400);font-weight:800;vertical-align:super;margin-inline-start:6px}
.prize-card.head{background:linear-gradient(150deg,rgba(247,159,91,0.16),rgba(116,0,111,0.10));border-color:rgba(247,159,91,0.34)}
.sponsor{position:relative;margin-top:26px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,0.6);text-align:center}
.sponsor .pb-text{font-size:13px;color:rgba(255,255,255,0.55);font-weight:500}
.sponsor .lc-logo{height:26px;width:auto;display:block}
/* PRIZE TYPE CARDS */
.ptype-grid{position:relative;margin-top:6px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.ptype-grid{grid-template-columns:1fr;gap:13px}}
.ptype-card{background:var(--plum-700);border:1px solid rgba(255,255,255,0.10);border-radius:var(--radius-card);padding:28px 24px;text-align:center}
.ptype-icon{width:56px;height:56px;margin:0 auto 16px;border-radius:15px;background:linear-gradient(160deg,rgba(247,159,91,0.22),rgba(116,0,111,0.18));border:1px solid rgba(247,159,91,0.30);display:flex;align-items:center;justify-content:center;color:var(--orange-400)}
.ptype-icon svg{width:27px;height:27px}
.ptype-card h3{font-size:18px;font-weight:800;color:#fff;margin-bottom:8px}
.ptype-card p{font-size:14px;color:rgba(255,255,255,0.7);line-height:1.5}
.prize-note{position:relative;margin-top:24px;font-size:14.5px;color:rgba(255,255,255,0.72);line-height:1.6;max-width:60ch;font-weight:500}
@media(max-width:560px){.prize-note{font-size:13.5px}}
/* AVAILABILITY */
.avail{background:var(--cream-50);padding:36px 0;border-top:1px solid rgba(50,0,51,0.06)}
.avail-inner{display:flex;align-items:center;justify-content:center;gap:11px;text-align:center;flex-wrap:wrap;font-size:16px;color:var(--txt-dark-2)}
@media(max-width:560px){.avail-inner{font-size:14.5px}}
.avail-inner svg{width:21px;height:21px;color:var(--magenta-500);flex:none}
.avail-inner b{color:var(--plum-900);font-weight:800}
/* FINAL */
.final{background:linear-gradient(165deg,var(--plum-700),var(--plum-900));color:#fff;text-align:center;position:relative;overflow:hidden}
.final h2{font-size:clamp(28px,4.6vw,52px);margin-bottom:12px;color:#fff}
.final p{font-size:clamp(16px,2vw,18px);color:rgba(255,255,255,0.82);margin-bottom:28px;max-width:30em;margin-inline:auto;font-weight:500}
.final .store-badges{justify-content:center}
/* FOOTER */
footer{background:var(--plum-900);color:rgba(255,255,255,0.55);padding:34px 0;font-size:13px;border-top:1px solid rgba(255,255,255,0.08)}
.foot-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
@media(max-width:560px){.foot-inner{flex-direction:column;gap:18px;text-align:center}}
.foot-tc{color:rgba(255,255,255,0.8);font-weight:600;cursor:pointer}
.foot-tc:hover{color:#fff;text-decoration:underline}
.socials{display:flex;gap:11px}
.socials a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;transition:background .15s}
.socials a:hover{background:rgba(255,255,255,0.14)}
.socials svg{width:16px;height:16px;color:rgba(255,255,255,0.75)}
/* MODAL */
.modal-bg{position:fixed;inset:0;z-index:90;background:rgba(20,0,20,0.6);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:var(--radius-card);max-width:680px;width:100%;max-height:84vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,0.4)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid rgba(50,0,51,0.1)}
.modal-head h3{font-size:18px;font-weight:800;color:var(--plum-900)}
.modal-close{background:rgba(50,0,51,0.06);border:none;width:34px;height:34px;border-radius:50%;font-size:18px;cursor:pointer;color:var(--plum-900);display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:rgba(50,0,51,0.12)}
.modal-body{padding:20px 22px;overflow-y:auto;font-size:14px;color:var(--txt-dark-2);line-height:1.7}
.modal-body h4{color:var(--plum-900);font-size:16px;margin-bottom:13px}
.modal-body ol{padding-inline-start:20px;display:flex;flex-direction:column;gap:10px}
.modal-body .legal-note{margin-top:15px;padding-top:13px;border-top:1px solid rgba(50,0,51,0.08);font-size:12px;color:rgba(63,22,81,0.6);font-style:italic}
/* ===== MOBILE REFINEMENT PASS (does not affect desktop) ===== */
@media(max-width:560px){
/* NAV: declutter — smaller logo, tighter CTA, balanced spacing */
.nav-inner{padding:9px 14px;gap:8px}
.brand img{height:28px}
.nav-cta{padding:7px 12px;font-size:12px;border-radius:999px}
.lang-btn{padding:5px 11px;font-size:12px}
.burger{width:34px;height:34px}
.nav-actions{gap:7px}
/* HERO: tighten the whole stack so card + next section come up sooner */
.hero-inner{padding:22px 18px 26px;gap:14px}
.eyebrow{margin-bottom:14px}
h1.hero-title{margin-bottom:14px;line-height:1.1}
.hero-sub{margin-bottom:18px}
.store-badges{gap:9px}
.store-badge{padding:7px 16px;min-width:0;width:200px}
.store-badge .tx .b{font-size:16px}
.hero-fine{margin-top:12px;font-size:11px}
.hero-visual{margin-top:2px}
.comet{width:128px;max-width:34vw}
/* PRED CARD: a touch more compact */
.pred-card{padding:13px 13px 12px}
.pc-box{width:32px;height:40px;font-size:19px}
.pc-team span{font-size:10.5px}
/* DAILY BAND: tighten padding */
.daily{padding:24px 0}
.daily-icon{width:48px;height:48px}
.daily-icon svg{width:25px;height:25px}
.daily-text h3{font-size:17px}
.daily-text p{font-size:13px;line-height:1.5}
/* SECTIONS: trim vertical rhythm so page isn't endless */
section.block{padding:38px 0}
.daily-inner{gap:12px}
/* PRIZES: cards slightly tighter */
.prize-card{padding:26px 20px}
.prize-card .pamt{font-size:clamp(38px,11vw,52px)}
/* PHONE FRAME: ensure it never crowds */
.phone-frame{width:215px;max-width:66vw}
}
/* very narrow phones */
@media(max-width:360px){
.nav-cta{font-size:11px;padding:6px 10px}
.lang-btn{font-size:11px;padding:5px 9px}
.brand img{height:25px}
.comet{width:112px;max-width:30vw}
.store-badge{width:185px}
}
/* ---------------------------------------------------------------------
Link-style buttons
The Terms triggers were / . They are now real