/* El3ab (العب) — the product page, in El3ab's own world: a night table (#14121a), a gold crown, one
   colour per game, and Rubik. Loaded only on /el3ab/ and /ar/el3ab/, on top of site.css. Logical
   properties throughout so the Arabic page mirrors without overrides. */

@font-face { font-family: 'Rubik'; src: url('/assets/fonts/rubik-arabic.woff2') format('woff2'); font-weight: 300 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Rubik'; src: url('/assets/fonts/rubik-latin.woff2') format('woff2'); font-weight: 300 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.el3ab-page {
  --e-bg: #14121a; --e-deep: #0d0c12; --e-panel: #1d1a25; --e-panel-2: #24202e;
  --e-gold: #ffc531; --e-gold-2: #ffd866; --e-gold-d: #d18d08; --e-cyan: #3cd6e6;
  --e-text: #e9e6f1; --e-muted: #a9a3b8; --e-line: rgba(255, 255, 255, .08); --e-line-2: rgba(255, 255, 255, .16);
  --e-f: 'Rubik', 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  background: var(--e-bg);
}
.el3ab-page main.e { background: var(--e-bg); color: var(--e-text); --ink: #fff; --text: var(--e-text); --muted: var(--e-muted); --line: var(--e-line); --line-2: var(--e-line-2); font-family: var(--e-f); }
.e h1, .e h2, .e h3 { font-family: var(--e-f); color: #fff; letter-spacing: -.02em; }
:lang(ar) .e h1, :lang(ar) .e h2, :lang(ar) .e h3 { letter-spacing: 0; }
.e h2 { font-weight: 500; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08; text-wrap: balance; }
:lang(ar) .e h2 { line-height: 1.35; }
.e h2 b, .e h1 b { font-weight: 800; color: var(--e-gold); }
.e h3 { font-weight: 700; font-size: 1.15rem; }
.e p { color: var(--e-muted); }
.e-sec { position: relative; padding-block: clamp(80px, 10vw, 140px); }
.e-head { max-inline-size: 820px; margin-block-end: clamp(36px, 5vw, 60px); }
.e-head > p { margin-block-start: 16px; font-size: 1.08rem; max-inline-size: 640px; }
.e-head-row { max-inline-size: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 64px; align-items: end; }
.e-head-row > p { margin: 0; }
@media (max-width: 900px) { .e-head-row { grid-template-columns: 1fr; } }
.e .ico-sm { color: var(--e-gold); }


/* ---------------------------------------------------------------- hero */
.e-hero { position: relative; isolation: isolate; padding-block: calc(var(--nav-h) + 24px) clamp(48px, 6vw, 72px); overflow: clip;
  background: radial-gradient(60% 70% at 78% 30%, rgba(255, 197, 49, .16), transparent 70%), radial-gradient(50% 60% at 10% 100%, rgba(140, 92, 250, .18), transparent 70%), radial-gradient(40% 50% at 100% 100%, rgba(32, 168, 93, .12), transparent 70%), var(--e-bg); }
.e-dots { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.5px); background-size: 22px 22px; mask-image: radial-gradient(80% 80% at 60% 40%, #000 30%, transparent 85%); -webkit-mask-image: radial-gradient(80% 80% at 60% 40%, #000 30%, transparent 85%); }
.e-hero .crumbs { margin-block-end: clamp(20px, 3vw, 36px); }
.e-hero .crumbs a, .e-hero .crumbs li { color: var(--e-muted); }
.e-hero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.e-live { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; border-radius: 99px; background: rgba(32, 168, 93, .12); border: 1px solid rgba(46, 212, 122, .3); color: #8ff0b8; font-size: .85rem; font-weight: 500; margin-block-end: 22px; }
.e-live i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: #2ed47a; box-shadow: 0 0 0 0 rgba(46, 212, 122, .6); animation: e-pulse 2s infinite; }
@keyframes e-pulse { 70% { box-shadow: 0 0 0 10px rgba(46, 212, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 212, 122, 0); } }
.e-hero h1 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.04; text-wrap: balance; }
:lang(ar) .e-hero h1 { line-height: 1.3; }
.e-crown { inline-size: 88px; block-size: auto; filter: drop-shadow(0 10px 30px rgba(255, 197, 49, .45)); margin-block-end: 6px; animation: e-bob 5s ease-in-out infinite; }
@keyframes e-bob { 50% { transform: translateY(-6px) rotate(-2deg); } }
.e-word { display: block; font-weight: 800; font-size: clamp(4rem, 10vw, 8.2rem); line-height: .9; letter-spacing: -.05em; color: var(--e-gold); text-shadow: 0 .04em 0 var(--e-gold-d), 0 18px 60px rgba(255, 197, 49, .35); padding-block-end: .06em; }
:lang(ar) .e-word { letter-spacing: 0; line-height: 1.05; }
.e-lede { margin-block-start: 22px; max-inline-size: 560px; font-size: 1.1rem; line-height: 1.7; color: #c9c3d6 !important; }

.e-stores { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 30px; }
.e-store { display: inline-flex; align-items: center; gap: 12px; block-size: 56px; padding-inline: 16px 20px; border-radius: 14px; background: #fff; color: #120d1a; font-weight: 700; font-size: 1.05rem; line-height: 1.1; transition: transform .25s var(--ease), box-shadow .25s; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6); }
.e-store small { display: block; font-size: .7rem; font-weight: 500; color: #5b5468; }
.e-store .ico { inline-size: 24px; block-size: 24px; }
.e-store:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -14px rgba(255, 197, 49, .5); }
.e-store-web { background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid var(--e-line-2); box-shadow: none; }
.e-store-web small { color: var(--e-muted); }
.e-stores-c { justify-content: center; }

.e-hero-vis { position: relative; block-size: clamp(440px, 46vw, 600px); }
.e-glow { position: absolute; inset: 12% 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 197, 49, .35), transparent); filter: blur(30px); }
.e-phone { position: relative; border-radius: 30px; padding: 7px; background: linear-gradient(160deg, #3a3446, #16141c); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 50px 90px -30px rgba(0, 0, 0, .9); }
.e-phone img { inline-size: 100%; block-size: auto; aspect-ratio: 390 / 845; object-fit: cover; object-position: top; border-radius: 24px; }
.e-hero-vis .e-phone { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; }
.e-ph-c { inline-size: clamp(200px, 21vw, 280px); transform: translate(-50%, -50%); z-index: 3; }
.e-ph-l { inline-size: clamp(160px, 16vw, 220px); transform: translate(-128%, -44%) rotate(-9deg); z-index: 2; opacity: .92; }
.e-ph-r { inline-size: clamp(160px, 16vw, 220px); transform: translate(28%, -44%) rotate(9deg); z-index: 2; opacity: .92; }
[dir='rtl'] .e-ph-c { transform: translate(50%, -50%); }
[dir='rtl'] .e-ph-l { transform: translate(128%, -44%) rotate(9deg); }
[dir='rtl'] .e-ph-r { transform: translate(-28%, -44%) rotate(-9deg); }
.e-tile { position: absolute; z-index: 4; display: grid; place-items: center; inline-size: 68px; block-size: 68px; border-radius: 20px; background: color-mix(in srgb, var(--g) 22%, #1d1a25); border: 1px solid color-mix(in srgb, var(--g) 50%, transparent); box-shadow: 0 6px 0 color-mix(in srgb, var(--g) 45%, #000), 0 24px 40px -12px rgba(0, 0, 0, .8); animation: e-float 6s ease-in-out infinite; }
.e-tile .gi { inline-size: 40px; block-size: 40px; }
.e-tile-1 { inset-block-start: 6%; inset-inline-start: 4%; animation-delay: -1s; rotate: -10deg; }
.e-tile-2 { inset-block-start: 2%; inset-inline-end: 8%; animation-delay: -2.5s; rotate: 8deg; }
.e-tile-3 { inset-block-end: 6%; inset-inline-start: 10%; animation-delay: -4s; rotate: 6deg; }
.e-tile-4 { inset-block-end: 10%; inset-inline-end: 2%; animation-delay: -3s; rotate: -8deg; }
@keyframes e-float { 50% { transform: translateY(-14px); } }

.e-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: clamp(40px, 5vw, 64px); border-block-start: 1px solid var(--e-line); }
.e-facts li { padding: 22px 20px 0; border-inline-start: 1px solid var(--e-line); }
.e-facts li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.e-facts b { display: block; font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1; color: #fff; letter-spacing: -.03em; }
.e-facts b small { font-size: .45em; font-weight: 600; color: var(--e-gold); margin-inline-start: 4px; }
.e-facts span { display: block; margin-block-start: 8px; font-size: .92rem; color: var(--e-muted); }
@media (max-width: 960px) {
  .e-hero-in { grid-template-columns: 1fr; }
  .e-hero-vis { block-size: 470px; }
  .e-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .e-facts li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 520px) {
  .e-hero-vis { block-size: 400px; }
  .e-tile { inline-size: 54px; block-size: 54px; border-radius: 16px; }
  .e-tile .gi { inline-size: 32px; block-size: 32px; }
  .e-store { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- ticker */
.e-ticker { overflow: hidden; border-block: 1px solid var(--e-line); background: var(--e-deep); padding-block: 16px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.e-ticker ul { display: flex; gap: 14px; inline-size: max-content; animation: e-tick 40s linear infinite; }
[dir='rtl'] .e-ticker ul { animation-name: e-tick-rtl; }
.e-ticker li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 99px; background: color-mix(in srgb, var(--g) 12%, transparent); border: 1px solid color-mix(in srgb, var(--g) 30%, transparent); white-space: nowrap; font-family: var(--e-f); }
.e-ticker .gi { inline-size: 26px; block-size: 26px; }
.e-ticker b { color: #fff; font-weight: 700; }
.e-ticker span { color: var(--e-muted); }
@keyframes e-tick { to { transform: translateX(-33.333%); } }
@keyframes e-tick-rtl { to { transform: translateX(33.333%); } }

/* ---------------------------------------------------------------- games */
.e-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.e-game { position: relative; overflow: hidden; padding: 26px; border-radius: 22px; background: linear-gradient(170deg, color-mix(in srgb, var(--g) 16%, var(--e-panel)) 0%, var(--e-panel) 55%); border: 1px solid color-mix(in srgb, var(--g) 26%, transparent); transition: transform .35s var(--ease), border-color .3s; }
.e-game::after { content: ''; position: absolute; inset-block-start: -40%; inset-inline-end: -30%; inline-size: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--g) 30%, transparent), transparent); pointer-events: none; }
.e-game:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--g) 60%, transparent); }
.e-gi { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 18px; margin-block-end: 22px; background: color-mix(in srgb, var(--g) 22%, #15131b); border: 1px solid color-mix(in srgb, var(--g) 45%, transparent); box-shadow: 0 5px 0 color-mix(in srgb, var(--g) 40%, #000); }
.e-gi .gi { inline-size: 38px; block-size: 38px; }
.e-new { position: absolute; inset-block-start: 26px; inset-inline-end: 26px; padding: 4px 10px; border-radius: 99px; background: var(--e-gold); color: #1a1405; font-size: .75rem; font-weight: 700; }
.e-game h3 { font-size: 1.45rem; font-weight: 800; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.e-game h3 span { font-size: .95rem; font-weight: 500; color: color-mix(in srgb, var(--g) 70%, #fff); }
.e-game > p { margin-block-start: 10px; font-size: .98rem; line-height: 1.6; }
.e-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 18px !important; }
.e-tags span { padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid var(--e-line); font-size: .78rem; color: #d8d3e2; }
.e-beta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-block-start: 22px; padding: 18px 22px; border-radius: 18px; border: 1px dashed var(--e-line-2); }
.e-beta-h { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: #fff !important; }
.e-beta ul { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.e-beta li { display: inline-flex; align-items: center; gap: 8px; font-size: .9rem; }
.e-beta .gi { inline-size: 26px; block-size: 26px; filter: saturate(.6); opacity: .85; }
.e-beta b { color: #fff; }
.e-beta span { color: var(--e-muted); }
@media (max-width: 1000px) { .e-games { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .e-games { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- phone rail */
.e-rail-sec { background: linear-gradient(180deg, var(--e-bg), var(--e-deep)); }
.e-rail { display: flex; gap: clamp(16px, 2vw, 26px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 30px; scrollbar-width: thin; scrollbar-color: rgba(255, 197, 49, .4) transparent; }
.e-rail:focus-visible { outline-offset: -4px; }
.e-rail li { flex: none; inline-size: clamp(190px, 19vw, 250px); scroll-snap-align: center; }
.e-rail li:nth-child(even) { margin-block-start: 40px; }
.e-rail p { margin-block-start: 14px; text-align: center; font-size: .92rem; color: #d8d3e2; }

/* ---------------------------------------------------------------- split blocks */
.e-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.e-split-rev .e-split-copy { order: 2; }
.e-split-copy > p { margin-block-start: 18px; font-size: 1.05rem; }
@media (max-width: 960px) { .e-split { grid-template-columns: 1fr; } .e-split-rev .e-split-copy { order: 0; } }
.e-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block-start: 28px; }
.e-formats li { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--e-panel); border: 1px solid var(--e-line); }
.e-formats .ico { grid-row: span 2; inline-size: 26px; block-size: 26px; color: var(--e-gold); }
.e-formats b { color: #fff; font-weight: 700; }
.e-formats span { font-size: .84rem; color: var(--e-muted); line-height: 1.45; }
.e-checks { display: grid; gap: 10px; margin-block-start: 22px; }
.e-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: .97rem; color: #d8d3e2; }
.e-checks .ico { margin-block-start: 4px; }
@media (max-width: 520px) { .e-formats { grid-template-columns: 1fr; } }

/* Swiss standings demo */
.e-swiss { padding: 20px; border-radius: 22px; background: linear-gradient(180deg, var(--e-panel-2), var(--e-panel)); border: 1px solid var(--e-line-2); box-shadow: 0 60px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 197, 49, .05); }
.e-sw-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-end: 14px; font-size: .9rem; }
.e-sw-head b { color: #fff; font-size: 1.05rem; }
.e-sw-head span:last-child { margin-inline-start: auto; color: var(--e-muted); }
.e-sw-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: rgba(255, 68, 88, .14); color: #ff8a98; font-size: .75rem; font-weight: 700; }
.e-sw-live i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: #ff4458; animation: e-pulse 1.6s infinite; }
.e-sw-rows { position: relative; block-size: calc(8 * 50px); }
.e-sw-rows li { position: absolute; inset-inline: 0; block-size: 46px; transform: translateY(calc(var(--r) * 50px)); transition: transform .8s var(--ease), background-color .4s; display: grid; grid-template-columns: 28px minmax(0, 1fr) 54px 96px 44px; align-items: center; gap: 10px; padding-inline: 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--e-line); }
.e-sw-rows li.lead { background: rgba(255, 197, 49, .1); border-color: rgba(255, 197, 49, .35); }
.e-sw-rank { color: var(--e-muted); font-weight: 700; text-align: center; }
.e-sw-name { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e-sw-elo { color: var(--e-muted); font-size: .85rem; }
.e-sw-res { display: flex; gap: 4px; }
.e-sw-res i { inline-size: 14px; block-size: 14px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.e-sw-res i.w { background: #2ed47a; } .e-sw-res i.d { background: var(--e-muted); } .e-sw-res i.l { background: #ff4458; }
.e-sw-pts { color: var(--e-gold); font-size: 1.1rem; text-align: end; }
.e-sw-foot { margin-block-start: 12px; font-size: .85rem; min-block-size: 1.6em; }
.e-sw-foot .num { color: #fff; }
@media (max-width: 460px) { .e-sw-rows li { grid-template-columns: 22px minmax(0, 1fr) 80px 36px; } .e-sw-elo { display: none; } }

/* ping demo */
.e-speed { background: radial-gradient(50% 60% at 30% 50%, rgba(60, 214, 230, .1), transparent 70%), var(--e-bg); }
.e-ping { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: clamp(24px, 4vw, 44px) clamp(18px, 3vw, 36px) 90px; border-radius: 24px; background: var(--e-panel); border: 1px solid var(--e-line-2); }
.e-pp { display: grid; justify-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: .9rem; }
.e-pp-av { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 18px; background: #8c5cfa; color: #fff; font-size: 1.6rem; font-weight: 800; box-shadow: 0 5px 0 #5b39b0; }
.e-pp-b { background: #3b86ff; box-shadow: 0 5px 0 #2759b0; }
.e-wire { position: relative; block-size: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 8px, transparent 8px 14px); }
.e-pulse { position: absolute; inset-block-start: 50%; inset-inline-start: 0; inline-size: 16px; block-size: 16px; margin-block-start: -8px; border-radius: 50%; background: var(--e-cyan); box-shadow: 0 0 24px 6px rgba(60, 214, 230, .6); animation: e-ping 1.6s cubic-bezier(.6, .05, .3, 1) infinite; }
[dir='rtl'] .e-pulse { animation-name: e-ping-rtl; }
@keyframes e-ping { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 55% { transform: translateX(calc(var(--wire, 240px) - 16px)); opacity: 1; } 70%, 100% { transform: translateX(calc(var(--wire, 240px) - 16px)); opacity: 0; } }
@keyframes e-ping-rtl { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 55% { transform: translateX(calc(16px - var(--wire, 240px))); opacity: 1; } 70%, 100% { transform: translateX(calc(16px - var(--wire, 240px))); opacity: 0; } }
.e-mv { position: absolute; inset-block-end: 16px; inset-inline-start: 50%; translate: -50% 0; padding: 4px 12px; border-radius: 8px; background: #fff; color: #14121a; font-weight: 800; font-family: var(--e-f); }
[dir='rtl'] .e-mv { translate: 50% 0; }
.e-ms { position: absolute; inset-block-end: 20px; inset-inline: 0; display: flex; justify-content: center; align-items: baseline; gap: 6px; }
.e-ms b { font-family: var(--e-f); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--e-cyan); font-variant-numeric: tabular-nums; }
.e-ms span { color: var(--e-muted); font-weight: 600; }

/* ---------------------------------------------------------------- legends */
.e-legends { background: radial-gradient(60% 50% at 50% 40%, rgba(255, 197, 49, .1), transparent 70%), var(--e-deep); overflow: clip; }
.e-legend-row { display: flex; gap: clamp(10px, 1.6vw, 20px); overflow-x: auto; scroll-snap-type: x proximity; padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 26px; scrollbar-width: none; }
.e-legend-row::-webkit-scrollbar { display: none; }
.e-legend-row li { flex: none; inline-size: clamp(130px, 13vw, 170px); scroll-snap-align: start; text-align: center; }
.e-legend-row img { inline-size: 100%; block-size: auto; border-radius: 26px; background: var(--e-panel); border: 1px solid var(--e-line-2); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .9); transition: transform .35s var(--ease); }
.e-legend-row li:hover img { transform: translateY(-6px) rotate(-2deg); }
.e-legend-row span { display: block; margin-block-start: 10px; font-weight: 600; color: #fff; font-size: .95rem; }
.e-arab { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-block-start: clamp(48px, 6vw, 80px); padding: clamp(22px, 3vw, 36px); border-radius: 26px; background: var(--e-panel); border: 1px solid var(--e-line); }
.e-arab h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 700; line-height: 1.25; }
.e-arab p { margin-block-start: 12px; }
.e-mosaic { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.e-mosaic img { inline-size: 100%; block-size: auto; border-radius: 14px; background: #2a2533; }
.e-mosaic li:nth-child(odd) img { transform: translateY(6px); }
@media (max-width: 860px) { .e-arab { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- social bento */
.e-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.e-bento li { padding: 24px; border-radius: 20px; background: var(--e-panel); border: 1px solid var(--e-line); }
.e-bento li > .gi { inline-size: 40px; block-size: 40px; margin-block-end: 18px; }
.e-bento p { margin-block-start: 8px; font-size: .95rem; }
.e-b-wide { grid-column: span 2; grid-row: span 2; display: grid; grid-template-columns: minmax(0, 230px) 1fr; gap: 30px; align-items: center; background: linear-gradient(160deg, rgba(255, 197, 49, .12), var(--e-panel) 60%) !important; }
.e-b-wide h3 { font-size: 1.6rem; }
.e-phone-sm { border-radius: 24px; padding: 6px; }
.e-phone-sm img { border-radius: 19px; aspect-ratio: 600 / 1298; }
@media (max-width: 900px) { .e-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .e-b-wide { grid-column: span 2; grid-row: auto; } }
@media (max-width: 560px) { .e-bento { grid-template-columns: 1fr; } .e-b-wide { grid-column: auto; grid-template-columns: 1fr; } .e-b-wide .e-phone-sm { max-inline-size: 200px; } }

/* ---------------------------------------------------------------- shipping log */
.e-log { background: var(--e-deep); }
.e-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-block-start: 28px !important; }
.e-big b { font-weight: 800; font-size: clamp(3.6rem, 8vw, 6.4rem); line-height: .9; letter-spacing: -.04em; color: var(--e-gold); text-shadow: 0 .04em 0 var(--e-gold-d); }
.e-big span { color: #d8d3e2; font-weight: 500; }
.e-big-sm { margin-block-start: 12px !important; }
.e-big-sm b { font-size: clamp(2rem, 4vw, 2.8rem); }
.e-timeline { position: relative; display: grid; gap: 4px; padding-inline-start: 28px; }
.e-timeline::before { content: ''; position: absolute; inset-block: 8px; inset-inline-start: 6px; inline-size: 2px; background: linear-gradient(180deg, var(--e-gold), rgba(255, 197, 49, .1)); }
.e-timeline li { position: relative; padding: 14px 18px; border-radius: 14px; transition: background-color .3s; }
.e-timeline li:hover { background: var(--e-panel); }
.e-timeline li::before { content: ''; position: absolute; inset-inline-start: -27px; inset-block-start: 22px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--e-bg); border: 2px solid var(--e-gold); }
.e-timeline li:last-child::before { background: var(--e-gold); box-shadow: 0 0 0 6px rgba(255, 197, 49, .2); }
.e-timeline time { display: block; font-weight: 700; color: var(--e-gold); font-size: .9rem; }
.e-timeline p { margin-block-start: 4px; color: #e9e6f1; font-size: 1rem; }

/* ---------------------------------------------------------------- brands */
.e-sponsor { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(28px, 5vw, 64px); border-radius: 30px; background: radial-gradient(70% 90% at 100% 0%, rgba(255, 197, 49, .2), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(140, 92, 250, .2), transparent 60%), var(--e-panel); border: 1px solid rgba(255, 197, 49, .2); }
.e-sponsor-copy p { margin-block: 18px 28px; font-size: 1.04rem; }
.e-sponsor-n { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.e-sponsor-n li { padding: 20px; border-radius: 18px; background: rgba(0, 0, 0, .25); border: 1px solid var(--e-line); }
.e-sponsor-n b { display: block; font-weight: 800; font-size: 2.6rem; line-height: 1; color: #fff; }
.e-sponsor-n span { display: block; margin-block-start: 6px; font-size: .88rem; color: var(--e-muted); }
@media (max-width: 900px) { .e-sponsor { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- what it proves */
.e-proves { background: linear-gradient(180deg, var(--e-bg), #0b0910); }
.e-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.e-proof li { padding: 26px 22px; border-radius: 20px; background: rgba(113, 0, 165, .12); border: 1px solid rgba(201, 155, 255, .18); }
.e-proof .ico { inline-size: 30px; block-size: 30px; color: var(--brand-light); margin-block-end: 18px; }
.e-proof p { margin-block-start: 8px; font-size: .95rem; }
.e-proof-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-block-start: 36px; }
.e-proof-cta .text-link { color: var(--brand-light); }
@media (max-width: 1000px) { .e-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .e-proof { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- faq + end */
.e-faq { background: #0b0910; }
.e-faq .qa { border-color: var(--e-line); }
.e-faq summary h3 { color: #fff; }
.e-end { position: relative; isolation: isolate; padding-block: clamp(110px, 14vw, 200px); text-align: center; overflow: clip; background: var(--e-deep); }
.e-end-art { position: absolute; inset: 0; z-index: -1; }
.e-end-art img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .32; filter: blur(2px); }
.e-end::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 45% at 50% 50%, rgba(13, 12, 18, .75), rgba(13, 12, 18, .35) 70%, rgba(13, 12, 18, .95)); }
.e-end h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.e-end .e-stores { margin-block-start: 34px; }

/* the nav link to El3ab, on every page */
.el3ab-page .nav { background: rgba(20, 18, 26, .85); }

@media (prefers-reduced-motion: reduce) {
  .e-ticker ul, .e-tile, .e-crown, .e-pulse { animation: none !important; }
}