/* Anghami End of Year · Two Concepts. One scrolling page: the city (01), a bridge, the Sound Quest (02), together. */
@font-face { font-family: 'Readex'; src: url('../assets/fonts/readex.woff2') format('woff2'); font-weight: 160 700; font-display: swap; }
:root {
  --bg: #07060b; --ink: #fff; --dim: rgba(255, 255, 255, .64); --faint: rgba(255, 255, 255, .42); --line: rgba(255, 255, 255, .1);
  --lime: #e0ff00; --violet: #7b2cff; --gold: #ffc56b; --amber: #ffa53d; --cyan: #00cee5; --magenta: #ff3df2;
  --ease: cubic-bezier(.2, .8, .2, 1); --expo: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(20px, 5vw, 64px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Readex', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; line-height: 1.4; }
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); }
.tnum { font-variant-numeric: tabular-nums; }
.ar { font-family: 'Readex'; direction: rtl; unicode-bidi: isolate; }
.c-gold { color: var(--gold); } .c-lime { color: var(--lime); }

/* type */
.eyebrow, .kicker { font-size: 12px; font-weight: 600; letter-spacing: .3em; }
.kicker { color: var(--dim); margin-bottom: 18px; }
.display { font-size: clamp(52px, 9.4vw, 148px); font-weight: 600; line-height: .94; letter-spacing: -.045em; }
.h1 { font-size: clamp(38px, 5.6vw, 84px); font-weight: 600; line-height: 1; letter-spacing: -.035em; }
.h2 { font-size: clamp(32px, 4.6vw, 68px); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; }
.lede { font-size: clamp(17px, 1.6vw, 22px); line-height: 1.5; color: var(--dim); font-weight: 300; max-width: 620px; }
.body { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.6; color: var(--dim); font-weight: 300; max-width: 560px; margin-top: 22px; }

/* buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 99px; font-size: 15.5px; font-weight: 600; transition: transform .2s var(--ease), background .2s; }
.btn:active { transform: scale(.97); }
.btn.lime { background: var(--lime); color: #0b0a10; box-shadow: 0 12px 36px rgba(224, 255, 0, .22); }
.btn.lime:hover { background: #eaff4d; }
.btn.ghost { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.btn.ghost:hover { background: rgba(255, 255, 255, .14); }

/* reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--expo), transform 1.1s var(--expo); }
[data-reveal].in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ nav */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: calc(env(safe-area-inset-top) + 16px) var(--pad) 16px; transition: background .4s, backdrop-filter .4s, padding .4s; }
.nav.solid { background: rgba(7, 6, 11, .72); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); padding-top: calc(env(safe-area-inset-top) + 12px); padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.logo { display: flex; align-items: center; gap: 10px; } .logo img:first-child { height: 30px; } .logo img:last-child { height: 16px; }
.tabs { display: flex; gap: 6px; padding: 5px; border-radius: 99px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.tabs a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; font-size: 13.5px; color: rgba(255, 255, 255, .7); transition: background .3s, color .3s; white-space: nowrap; }
.tabs a i { font-style: normal; font-size: 11px; letter-spacing: .1em; color: var(--faint); }
.tabs a.on { background: rgba(255, 255, 255, .12); color: #fff; }
.tabs a[data-tab=city].on i { color: var(--gold); } .tabs a[data-tab=quest].on i { color: var(--lime); }
.nav-cta { font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 99px; background: var(--lime); color: #0b0a10; white-space: nowrap; }
@media (max-width: 960px) { .tabs { display: none; } }
@media (max-width: 480px) { .nav-cta { font-size: 13px; padding: 9px 14px; } .logo img:last-child { display: none; } }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding-bottom: clamp(24px, 5vh, 56px); }
.split { position: absolute; inset: 0; display: flex; }
.half { position: relative; flex: 1; overflow: hidden; transition: flex .9s var(--expo); }
.half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: heroIn 2.4s var(--expo) both; }
.h-city img { object-position: 58% 50%; }
.h-quest img { object-position: 46% 44%; animation-delay: .12s; }
.half::after { content: ''; position: absolute; inset: 0; transition: background .6s; }
.h-city::after { background: linear-gradient(90deg, rgba(7, 6, 11, .1), rgba(7, 6, 11, .35)); }
.h-quest::after { background: linear-gradient(270deg, rgba(7, 6, 11, .1), rgba(7, 6, 11, .35)); }
.split::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(255, 255, 255, .35) 30%, rgba(255, 255, 255, .35) 70%, transparent); transition: left .9s var(--expo); }
@media (hover: hover) and (min-width: 900px) { .split:has(.h-city:hover) .h-city, .split:has(.h-quest:hover) .h-quest { flex: 1.35; } }
@keyframes heroIn { from { transform: scale(1.18); opacity: 0 } }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(7, 6, 11, .6), rgba(7, 6, 11, .05) 30%, rgba(7, 6, 11, .25) 55%, rgba(7, 6, 11, .96)); }
.hero-in { position: relative; pointer-events: none; }
.hero-in .eyebrow { color: var(--lime); animation: up 1s .3s var(--expo) both; }
.hero-in h1 { margin-top: 18px; animation: up 1.2s .4s var(--expo) both; }
.hero-in .lede { margin-top: 22px; animation: up 1.2s .55s var(--expo) both; }
@keyframes up { from { opacity: 0; transform: translateY(30px) } }
.hero-tiles { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: clamp(28px, 5vh, 48px); animation: up 1.2s .75s var(--expo) both; }
.tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 22px; background: rgba(12, 10, 20, .55); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .3s var(--ease), border-color .3s, background .3s; }
.tile:hover { transform: translateY(-3px); background: rgba(20, 16, 32, .65); }
.t-city:hover { border-color: rgba(255, 197, 107, .5); } .t-quest:hover { border-color: rgba(224, 255, 0, .45); }
.tile .tn { font-size: 11px; font-weight: 600; letter-spacing: .22em; }
.t-city .tn { color: var(--gold); } .t-quest .tn { color: var(--lime); }
.tile b { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -.02em; }
.tile .ts { font-size: 14px; color: var(--dim); }
.tile .arrow { position: absolute; right: 20px; top: 18px; font-size: 18px; color: var(--faint); }
@media (max-width: 760px) {
  .split { flex-direction: column; } .split::after { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); }
  .hero-tiles { grid-template-columns: 1fr; gap: 10px; } .tile { padding: 16px 18px; } .tile .ts { display: none; }
}

/* ------------------------------------------------------------------ scrollytelling (sticky) */
.scrolly { position: relative; height: 340vh; }
.s-bridge { height: 300vh; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.sticky .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: opacity, transform; }
.sticky .shade { position: absolute; inset: 0; background: linear-gradient(rgba(7, 6, 11, .55), rgba(7, 6, 11, .05) 35%, rgba(7, 6, 11, .1) 55%, rgba(7, 6, 11, .9)); }
.s-city .lit { opacity: 0; }
.steps { position: absolute; left: 0; right: 0; bottom: clamp(70px, 14vh, 140px); }
.steps.center { top: 50%; bottom: auto; transform: translateY(-50%); text-align: center; }
.step { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; opacity: 0; transform: translateY(24px); filter: blur(8px); transition: opacity .6s, transform .8s var(--expo), filter .6s; pointer-events: none; }
.steps.center .step { bottom: auto; top: 50%; transform: translateY(calc(-50% + 24px)); }
.step.on { opacity: 1; transform: none; filter: none; }
.steps.center .step.on { transform: translateY(-50%); }
.step.gone { opacity: 0; transform: translateY(-20px); filter: blur(6px); }
.steps.center .step.gone { transform: translateY(calc(-50% - 20px)); }
.step .kicker { color: var(--gold); }
.big-ar { margin-top: 18px; font-size: clamp(28px, 3.4vw, 48px); font-weight: 500; color: rgba(255, 255, 255, .85); text-align: left; direction: rtl; display: inline-block; }
.lights { position: absolute; right: var(--pad); top: calc(env(safe-area-inset-top) + 92px); display: flex; align-items: baseline; gap: 12px; padding: 10px 16px; border-radius: 14px;
  background: rgba(10, 8, 18, .5); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.lights span { font-size: 11px; letter-spacing: .26em; color: var(--faint); }
.lights b { font-size: 22px; font-weight: 600; color: var(--gold); min-width: 4.2ch; text-align: right; }
.scrub { position: absolute; left: var(--pad); right: var(--pad); bottom: 36px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.scrub i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.windows { position: absolute; inset: 0; pointer-events: none; }
.windows i { position: absolute; width: 3px; height: 4px; border-radius: 1px; background: #ffe2a6; box-shadow: 0 0 6px 2px rgba(255, 200, 120, .8), 0 0 18px 4px rgba(255, 180, 90, .35); opacity: 0; transition: opacity .25s; }
.windows i.on { opacity: 1; }
.s-bridge .bub { opacity: 0; object-position: 45% 45%; }
.s-bridge .step .kicker { color: var(--lime); }

/* ------------------------------------------------------------------ sections */
.sec { position: relative; padding: clamp(90px, 14vh, 170px) 0; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.sec-head .body { margin-top: 0; max-width: 380px; }

.idea .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.vs-col { padding: 30px; border-radius: 26px; border: 1px solid var(--line); }
.vs-col.old { background: rgba(255, 255, 255, .025); color: var(--faint); }
.vs-col.new { background: linear-gradient(150deg, rgba(255, 197, 107, .12), rgba(123, 44, 255, .1)); border-color: rgba(255, 197, 107, .3); }
.vs-h { font-size: 13px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 18px; }
.vs-col.new .vs-h { color: var(--gold); }
.vs-col ul { list-style: none; display: grid; gap: 14px; font-size: 17px; line-height: 1.4; }
.vs-col li { display: flex; gap: 12px; } .vs-col li::before { content: '—'; opacity: .4; }
.vs-col.new li::before { content: '✓'; color: var(--gold); opacity: 1; }
.vs-col.new li { color: #fff; }
@media (max-width: 760px) { .idea .vs { grid-template-columns: 1fr; } .vs-col { padding: 24px; } .vs-col ul { font-size: 15.5px; } }

.player16 { position: relative; margin-top: 44px; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); }
.player16 video { width: 100%; height: 100%; object-fit: cover; }
.play-big { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(circle, rgba(0, 0, 0, .1), rgba(0, 0, 0, .45)); transition: opacity .4s; }
.play-big .pb { width: 92px; height: 92px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; padding-left: 6px; box-shadow: 0 0 0 0 rgba(224, 255, 0, .5); animation: ring 2s var(--ease) infinite; transition: transform .2s; }
.play-big:hover .pb { transform: scale(1.06); }
.play-big .pl { font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.player16.playing .play-big { opacity: 0; pointer-events: none; }
@keyframes ring { 70%, 100% { box-shadow: 0 0 0 22px rgba(224, 255, 0, 0) } }

.grid8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 52px; }
.grid8 figure { border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); transition-delay: calc(var(--i, 0) * 60ms); }
.grid8 img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s var(--expo); }
.grid8 figure:hover img { transform: scale(1.05); }
.grid8 figcaption { padding: 16px 18px 20px; font-size: 14px; color: var(--dim); line-height: 1.45; }
.grid8 figcaption b { display: block; color: #fff; font-size: 16.5px; font-weight: 600; margin-bottom: 4px; letter-spacing: -.01em; }
@media (max-width: 1000px) { .grid8 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grid8 { gap: 10px; } .grid8 figcaption { padding: 12px 12px 14px; font-size: 12.5px; } .grid8 figcaption b { font-size: 14.5px; } }

/* the app: phone + chapters */
.app { overflow: hidden; background: radial-gradient(ellipse 60% 50% at 25% 50%, rgba(123, 44, 255, .16), transparent 70%); }
.app-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.app-phone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.phone { position: relative; width: min(340px, 80vw); aspect-ratio: 9 / 19.2; border-radius: 52px; background: #0a0a0d; padding: 12px; box-shadow: 0 0 0 2px #2a2930, 0 0 0 5px #0d0d10, 0 0 0 6px #3b3a44, 0 40px 100px rgba(0, 0, 0, .7), 0 0 120px rgba(123, 44, 255, .25); }
.phone video, .phone iframe { width: 100%; height: 100%; border-radius: 41px; object-fit: cover; background: #000; border: 0; }
.phone .island { position: absolute; top: 22px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 16px; background: #000; z-index: 3; }
.app .phone video { object-fit: cover; object-position: 50% 50%; transform: scale(1.0); }
.snd { font-size: 13px; padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: var(--dim); }
.chapters { list-style: none; margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; max-width: 560px; }
.chapters li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-left: -12px; border-radius: 12px; font-size: 15px; color: rgba(255, 255, 255, .6); cursor: pointer; transition: background .25s, color .25s; }
.chapters li i { font-style: normal; font-size: 11px; letter-spacing: .12em; color: var(--faint); width: 18px; }
.chapters li:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.chapters li.on { background: rgba(255, 197, 107, .12); color: #fff; } .chapters li.on i { color: var(--gold); }
.rail-wrap { margin-top: clamp(60px, 10vh, 110px); }
.rail { display: flex; gap: 18px; overflow-x: auto; padding: 10px var(--pad) 24px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail img { flex: 0 0 auto; height: clamp(360px, 52vh, 520px); width: auto; border-radius: 26px; scroll-snap-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
@media (max-width: 900px) { .app-grid { grid-template-columns: 1fr; } .chapters { grid-template-columns: 1fr 1fr; } .chapters li { font-size: 13.5px; padding: 8px 10px; } }

/* Ramadan */
.ramadan { overflow: hidden; background: #0d0905; }
.ram-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; filter: saturate(1.1); }
.ramadan::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 9, 5, .96) 20%, rgba(13, 9, 5, .55) 65%, rgba(13, 9, 5, .3)), linear-gradient(rgba(13, 9, 5, .6), transparent 20%, transparent 80%, rgba(7, 6, 11, 1)); }
.ram-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; }
.ram-ar { margin-top: 18px; font-size: clamp(34px, 4vw, 56px); color: var(--gold); text-align: left; display: inline-block; text-shadow: 0 0 30px rgba(255, 197, 107, .35); }
.nights { margin-top: 30px; }
.nights .dots { display: grid; grid-template-columns: repeat(29, 1fr); gap: 5px; max-width: 470px; }
.nights .dots i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 197, 107, .2); }
.nights .dots i.on { background: var(--gold); box-shadow: 0 0 8px rgba(255, 197, 107, .7); }
.nights span { display: block; margin-top: 12px; font-size: 14px; color: var(--dim); } .nights b { color: var(--gold); font-weight: 600; }
.ram-still { border-radius: 24px; overflow: hidden; box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 197, 107, .2); }
.ram-still figcaption { padding: 14px 18px; font-size: 14px; color: var(--dim); background: rgba(20, 14, 8, .8); }
@media (max-width: 900px) { .ram-in { grid-template-columns: 1fr; } }

/* the city's ending */
.city-end { overflow: hidden; min-height: 100svh; display: flex; align-items: center; }
.ce-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.city-end::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(7, 6, 11, 1), rgba(7, 6, 11, .2) 25%, rgba(7, 6, 11, .35) 60%, rgba(7, 6, 11, 1)); }
.ce-in { position: relative; z-index: 1; }
.ce-n { font-size: clamp(64px, 12vw, 190px); font-weight: 600; letter-spacing: -.05em; line-height: .9; color: var(--gold); text-shadow: 0 0 60px rgba(255, 197, 107, .35); }
.ce-in .h1 { margin-top: 10px; }

/* concept 02 */
.q-open { overflow: hidden; min-height: 90svh; display: flex; align-items: center; }
.aurora { position: absolute; inset: -20%; opacity: .55; pointer-events: none; }
.aurora i { position: absolute; width: 60%; height: 55%; border-radius: 50%; mix-blend-mode: screen; animation: drift 18s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { left: 0; top: 10%; background: radial-gradient(closest-side, rgba(255, 165, 61, .45), transparent); }
.aurora i:nth-child(2) { right: 0; top: 20%; background: radial-gradient(closest-side, rgba(0, 206, 229, .4), transparent); animation-delay: -6s; }
.aurora i:nth-child(3) { left: 20%; bottom: 0; background: radial-gradient(closest-side, rgba(255, 61, 242, .38), transparent); animation-delay: -11s; }
.aurora i:nth-child(4) { right: 10%; bottom: 10%; background: radial-gradient(closest-side, rgba(123, 44, 255, .5), transparent); animation-delay: -3s; }
@keyframes drift { 50% { transform: translate(10%, -8%) scale(1.15) } 100% { transform: translate(-8%, 8%) scale(.95) } }
.q-open::after { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--bg), transparent 25%, transparent 75%, var(--bg)); pointer-events: none; }
.q-open-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: center; }
.q-open .display { margin-top: 8px; }
.q-open .lede { margin-top: 26px; }
.stat87 { position: relative; padding: 40px; border-radius: 30px; background: rgba(20, 10, 40, .5); border: 1px solid rgba(164, 91, 255, .3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; }
.stat87 .n { font-size: clamp(90px, 11vw, 160px); font-weight: 600; letter-spacing: -.06em; line-height: .9; }
.stat87 sup { font-size: .38em; color: #c9a8ff; vertical-align: top; position: relative; top: .3em; }
.stat87 p { margin-top: 14px; font-size: 18px; color: rgba(255, 255, 255, .78); line-height: 1.4; }
.stat87 .orbit { position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(164, 91, 255, .35); }
.stat87 .orbit::before { content: ''; position: absolute; inset: 30px; border-radius: 50%; border: 1px dashed rgba(164, 91, 255, .3); animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }
@media (max-width: 900px) { .q-open-in { grid-template-columns: 1fr; } .stat87 { padding: 28px; } }

.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 52px; }
.qc { position: relative; aspect-ratio: 3 / 4.3; border-radius: 26px; overflow: hidden; background: #111; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.qc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--expo); }
.qc:hover img { transform: scale(1.06); }
.qc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(5, 4, 8, .92)); }
.qc-in { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 1; }
.qn { font-size: 11px; font-weight: 600; letter-spacing: .24em; }
.c1 .qn { color: var(--amber); } .c2 .qn { color: var(--cyan); } .c3 .qn { color: var(--magenta); }
.c1 { box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 165, 61, .25); } .c2 { box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 206, 229, .25); } .c3 { box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 61, 242, .25); }
.qc b { display: block; margin-top: 8px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.02em; }
.qc p { margin-top: 8px; font-size: 14.5px; color: var(--dim); line-height: 1.5; }
.qc p .ar { display: block; margin-top: 6px; color: #fff; font-size: 16px; text-align: left; direction: rtl; }
@media (max-width: 900px) { .cards3 { grid-template-columns: 1fr; } .qc { aspect-ratio: 4 / 3.4; } }

.q-badge { overflow: hidden; }
.qb-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(40px, 8vw, 120px); align-items: center; }
.medal-wrap { width: min(360px, 70vw); aspect-ratio: 1; perspective: 1000px; position: relative; }
.medal-wrap::before { content: ''; position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg, rgba(224, 255, 0, .08) 0deg 5deg, transparent 5deg 18deg); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); mask: radial-gradient(circle, #000 20%, transparent 65%); animation: spin 50s linear infinite; }
.medal { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.medal .disc { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #0d0b14; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px rgba(0, 0, 0, .6), 0 0 100px rgba(224, 255, 0, .2); }
.medal .disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; mix-blend-mode: screen; transform: scale(1.3); animation: spin 40s linear infinite; }
.medal .sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 62%); mix-blend-mode: overlay; background-size: 250% 100%; }
.medal svg { position: absolute; inset: 7%; width: 86%; height: 86%; overflow: visible; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .25)); }
.rows { list-style: none; margin-top: 28px; max-width: 520px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); padding: 6px 20px; }
.rows li { display: flex; align-items: center; gap: 12px; padding: 13px 0; font-size: 16px; }
.rows li + li { border-top: 1px solid rgba(255, 255, 255, .06); }
.rows li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: 0 0 auto; }
.rows em { font-style: normal; color: var(--faint); }
@media (max-width: 900px) { .qb-grid { grid-template-columns: 1fr; justify-items: center; } .qb-grid > div:last-child { justify-self: stretch; } }

.q-play { background: radial-gradient(ellipse 50% 60% at 75% 50%, rgba(224, 255, 0, .07), transparent 70%); }
.play-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(40px, 7vw, 110px); align-items: center; }
.play-phone .phone { box-shadow: 0 0 0 2px #2a2930, 0 0 0 5px #0d0d10, 0 0 0 6px #3b3a44, 0 40px 100px rgba(0, 0, 0, .7), 0 0 140px rgba(224, 255, 0, .14); }
.iframe-load { position: absolute; inset: 12px; border-radius: 41px; overflow: hidden; z-index: 2; }
.iframe-load img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 45%; }
.iframe-load::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(5, 3, 10, .2), rgba(5, 3, 10, .85)); }
.il-in { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.il-tag { font-size: 11px; font-weight: 600; letter-spacing: .26em; color: var(--lime); }
.il-in b { font-size: 24px; font-weight: 600; padding: 14px 26px; border-radius: 99px; background: var(--lime); color: #0b0a10; font-size: 17px; margin-top: 6px; }
.il-in > span:last-child { font-size: 13px; color: var(--dim); }
.qr-row { display: flex; align-items: center; gap: 18px; margin-top: 34px; font-size: 14px; color: var(--dim); line-height: 1.5; }
.qr-row b { color: #fff; font-weight: 500; }
.qr { width: 108px; height: 108px; flex: 0 0 auto; padding: 9px; border-radius: 14px; background: #fff; } .qr svg { width: 100%; height: 100%; display: block; }
@media (max-width: 900px) { .play-grid { grid-template-columns: 1fr; } .play-phone { display: none; } .qr-row { display: none; } }

/* together */
.timeline { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 60px; position: relative; }
.timeline::before { content: ''; position: absolute; left: 0; right: 0; top: 44px; height: 2px; background: linear-gradient(90deg, var(--lime), var(--violet) 50%, var(--gold)); opacity: .6; }
.timeline li { position: relative; padding-right: 30px; }
.tl-when { display: block; font-size: 12px; font-weight: 600; letter-spacing: .24em; color: var(--dim); }
.tl-dot { display: block; width: 18px; height: 18px; border-radius: 50%; margin: 16px 0 22px; border: 3px solid var(--bg); }
.tl-dot.q { background: var(--lime); box-shadow: 0 0 0 2px var(--lime), 0 0 20px var(--lime); }
.tl-dot.m { background: var(--violet); box-shadow: 0 0 0 2px var(--violet), 0 0 20px var(--violet); }
.tl-dot.c { background: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 20px var(--gold); }
.timeline b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.timeline p { margin-top: 8px; font-size: 15.5px; color: var(--dim); line-height: 1.55; max-width: 330px; }
@media (max-width: 860px) { .timeline { grid-template-columns: 1fr; gap: 34px; padding-left: 34px; } .timeline::before { left: 8px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(var(--lime), var(--violet) 50%, var(--gold)); }
  .tl-dot { position: absolute; left: -34px; top: 0; margin: 0; } }

.glance .table { margin-top: 44px; border-radius: 24px; border: 1px solid var(--line); overflow: hidden; }
.tr { display: grid; grid-template-columns: .7fr 1.15fr 1.15fr; }
.tr > span { padding: 20px 24px; font-size: 15.5px; line-height: 1.5; color: var(--dim); border-top: 1px solid rgba(255, 255, 255, .06); }
.tr > span:first-child { color: var(--faint); font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.tr.th > span { border-top: 0; font-size: 15px; font-weight: 600; background: rgba(255, 255, 255, .03); }
.tr > span:nth-child(2) { background: rgba(255, 197, 107, .03); } .tr > span:nth-child(3) { background: rgba(224, 255, 0, .025); }
@media (max-width: 760px) { .tr { grid-template-columns: 1fr 1fr; } .tr > span:first-child { grid-column: 1 / -1; padding-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .06); } .tr > span:not(:first-child) { border-top: 0; font-size: 14px; padding: 10px 16px 18px; } .tr.th > span:first-child { display: none; } .tr.th > span { padding: 16px; } }

.foot { padding: clamp(90px, 14vh, 160px) 0 calc(env(safe-area-inset-bottom) + 50px); border-top: 1px solid rgba(255, 255, 255, .06); background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(123, 44, 255, .18), transparent 70%); }
.foot-big { font-size: clamp(40px, 6vw, 92px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.foot-links a, .foot-links button { padding: 12px 18px; border-radius: 99px; font-size: 14.5px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); transition: background .2s; }
.foot-links a { background: var(--lime); color: #0b0a10; font-weight: 600; border: 0; }
.foot-links button:hover { background: rgba(255, 255, 255, .13); }
.foot-small { display: flex; gap: 14px; align-items: flex-start; margin-top: 60px; font-size: 13px; color: var(--faint); line-height: 1.6; max-width: 760px; }
.foot-small img { width: 26px; flex: 0 0 auto; margin-top: 2px; }

/* film modal */
#modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: rgba(3, 2, 6, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#modal.on { display: grid; animation: fade .3s ease; }
#modal video { max-height: 88vh; max-width: 92vw; border-radius: 20px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
#modal .x { position: absolute; top: calc(env(safe-area-inset-top) + 16px); right: 16px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 18px; }
@keyframes fade { from { opacity: 0 } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; transition: none; } .aurora i, .medal .disc img, .medal-wrap::before, .half img { animation: none; } }