/*
 * Pearls of Quran — home page.
 * Deep-sea sections alternate with light pearl sections; the deep ones get darker as the visitor scrolls (depth).
 * Animations: transform + opacity only. The intro's critical styles live inline in index.html.
 */

/* ───────────────────────────── shared ───────────────────────────── */
main > section { position: relative; }
main > section[data-theme="pearl"] { background: var(--bg); overflow: hidden; overflow: clip; isolation: isolate; }
main > section > .container { position: relative; z-index: 1; }
main > section + section { margin-top: -1px; }   /* overlap by a pixel so no seam shows under a wave divider */
/* deep sections that sit under a wave: their light rays / pattern fade in from the section's own top colour, so the wave melts into them */
.dive::after, .film::after, .hadith::after, .feat::after, .finale::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: clamp(90px, 14vw, 200px); z-index: 0; pointer-events: none; background: linear-gradient(to bottom, var(--sea-top) 0, var(--sea-top) 8%, transparent 100%); }
.dive { --sea-top: #1E94A6; }
main > section:has(> .wave) { padding-bottom: calc(var(--section-y) + clamp(40px, 7vw, 110px)); }
.section-head h2 { max-width: 18ch; }
.section-head.center h2 { max-width: 22ch; }
.dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; vertical-align: middle; margin: 0 .5em; }
[data-pearl] { display: inline-block; flex: none; }
[data-pearl] svg, [data-shell] svg { width: 100%; height: 100%; }
[data-shell] { display: block; aspect-ratio: 200 / 180; }

/* ───────────────────────────── 1 · hero ───────────────────────────── */
.hero { --sea-top: #15708A; --sea-mid: #0E3D5C; --sea-bottom: #0A2438; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: calc(76px + clamp(1.5rem, 3.5vw, 3rem)) 0 clamp(4.5rem, 8vw, 6.5rem); color: #F3F7FA; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.hero__text { display: grid; gap: 1.35rem; justify-items: start; }
.hero__title { font-size: clamp(2.3rem, 1.05rem + 3.7vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; }
.gw .sw__i { background: linear-gradient(100deg, #FFF3CC 0%, var(--gold-300) 40%, var(--gold-500) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero__lead { max-width: 58ch; font-size: clamp(1rem, .94rem + .3vw, 1.14rem); line-height: 1.65; color: #C9DAE5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .3rem; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; }
.hero__note { display: inline-flex; align-items: center; font-size: var(--fs-sm); font-weight: 600; color: #DCE8EF; }
.hero__note [data-pearl] { width: 22px; height: 22px; margin-right: .6em; }
.hero__login { font-size: var(--fs-sm); }
.hero__scroll { position: absolute; left: 50%; bottom: 1.3rem; z-index: 2; display: grid; justify-items: center; gap: .5rem; width: 120px; margin-left: -60px; font-size: .68rem; font-weight: 650; letter-spacing: .22em; text-transform: uppercase; color: #B4C8D6; }
.hero__scroll span { width: 1px; height: 34px; background: linear-gradient(to bottom, transparent, var(--gold-300)); transform-origin: 50% 0; animation: scroll-cue 2.4s var(--ease-in-out) infinite; }
@keyframes scroll-cue { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: translateY(14px) scaleY(.2); opacity: 0; } }

/* the product shot: phone + hardcover. Everything inside scales with the stage (container-query units). */
.hero__visual { position: relative; width: min(100%, 610px); margin-inline: auto; }
.stage { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 100 / 99; }
.stage__halo { position: absolute; left: 6%; top: 10%; width: 88%; height: 80%; border-radius: 50%; background: radial-gradient(closest-side, rgba(134, 227, 230, .22), rgba(229, 197, 104, .08) 55%, transparent 72%); }
.stage__pearl { position: absolute; z-index: 3; }
.stage__pearl svg { animation: pearl-float 6s ease-in-out infinite; }
.stage__pearl--a { left: 1cqw; top: 3cqw; width: 8cqw; height: 8cqw; }
.stage__pearl--b { left: 42cqw; top: 89cqw; width: 6.4cqw; height: 6.4cqw; }
.stage__pearl--b svg { animation-delay: -2s; }
.stage__pearl--c { right: 0; top: 40cqw; width: 5cqw; height: 5cqw; z-index: 1; }
.stage__pearl--c svg { animation-delay: -4s; }
.stage__cap { display: flex; justify-content: center; gap: .6rem; margin-top: .4rem; }
.stage__cap span { display: inline-flex; align-items: center; gap: .45em; padding: .4em .9em; border-radius: var(--r-pill); border: 1px solid rgba(181, 221, 236, .2); background: rgba(5, 19, 33, .4); font-size: var(--fs-xs); font-weight: 600; color: #C9DAE5; }
.stage__cap .i { color: var(--gold-300); }

/* 3D hardcover */
.hbook { position: absolute; left: 6cqw; top: 15cqw; width: 43cqw; aspect-ratio: 806 / 1372; perspective: 230cqw; z-index: 1; }
.hbook__3d { position: absolute; inset: 0; --t: 6.4cqw; transform-style: preserve-3d; transform: rotateY(27deg) rotateX(-6deg) rotateZ(-2.5deg); animation: book-float 7s ease-in-out infinite; }
@keyframes book-float { 0%, 100% { transform: rotateY(27deg) rotateX(-6deg) rotateZ(-2.5deg) translateY(0); } 50% { transform: rotateY(24deg) rotateX(-5deg) rotateZ(-2deg) translateY(-1.6cqw); } }
.hbook__3d > span { position: absolute; display: block; }
.hbook__front { inset: 0; transform: translateZ(calc(var(--t) / 2)); border-radius: .5cqw 1.1cqw 1.1cqw .5cqw; overflow: hidden; background: #fff; }
.hbook__front img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.045); }
.hbook__front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(60, 40, 0, .28) 0, rgba(255, 255, 255, .3) 2.6%, rgba(60, 40, 0, .16) 5.4%, transparent 9%), linear-gradient(115deg, rgba(255, 255, 255, .34) 0, transparent 30%, transparent 72%, rgba(40, 28, 0, .12) 100%); }
.hbook__back { inset: 0; transform: translateZ(calc(var(--t) / -2)); border-radius: 1.1cqw .5cqw .5cqw 1.1cqw; background: #8A6410; }
.hbook__spine { left: calc(var(--t) / -2); top: 0; width: var(--t); height: 100%; transform: rotateY(-90deg); display: grid !important; place-items: center; background: linear-gradient(90deg, #7B5A10 0%, #C99A35 22%, #E5C568 48%, #C38919 72%, #7B5A10 100%); }
.hbook__spine b { writing-mode: vertical-rl; font-family: var(--font-display); font-size: 1.9cqw; font-weight: 700; letter-spacing: .34em; color: #FFF6DC; white-space: nowrap; }
.hbook__top { left: .5cqw; top: calc(var(--t) * -.39 + .7cqw); width: calc(100% - 1.6cqw); height: calc(var(--t) * .78); transform: rotateX(90deg); background: repeating-linear-gradient(0deg, #FBF7EC 0 .28cqw, #D8CDB6 .28cqw .42cqw); }
.hbook__shadow { position: absolute; left: -12%; right: -22%; bottom: -7cqw; height: 9cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(2, 10, 20, .55), transparent 72%); }

/* iPhone */
.iphone { position: absolute; right: 5cqw; top: 1.5cqw; width: 44.5cqw; container-type: inline-size; z-index: 2; }
.iphone__body { position: relative; aspect-ratio: 706 / 1466; padding: 1.15cqw; border-radius: 16.4cqw; background: linear-gradient(135deg, #57544F 0%, #C4C0B9 16%, #86827C 32%, #DAD6CF 50%, #77736D 68%, #ADA9A2 84%, #4F4C47 100%); box-shadow: inset 0 0 0 .3cqw rgba(255, 255, 255, .3), inset 0 0 1.4cqw rgba(0, 0, 0, .55), 0 5cqw 14cqw rgba(2, 10, 20, .55), 0 1cqw 3cqw rgba(2, 10, 20, .4); transform: rotate(3deg); animation: phone-float 7s ease-in-out infinite; }
@keyframes phone-float { 0%, 100% { transform: rotate(3deg) translateY(0); } 50% { transform: rotate(2.4deg) translateY(-2.4cqw); } }
.iphone__btn { position: absolute; width: 1cqw; border-radius: .5cqw; background: linear-gradient(90deg, #4F4C47, #A8A49D 60%, #6E6A64); }
.iphone__btn--action { left: -.75cqw; top: 17%; height: 4.4%; }
.iphone__btn--up { left: -.75cqw; top: 24.5%; height: 8%; }
.iphone__btn--down { left: -.75cqw; top: 34.5%; height: 8%; }
.iphone__btn--power { right: -.75cqw; top: 28%; height: 12.5%; background: linear-gradient(270deg, #4F4C47, #A8A49D 60%, #6E6A64); }
.iphone__bezel { position: relative; height: 100%; padding: 2.2cqw; border-radius: 15.3cqw; background: #05070A; }
.iphone__screen { position: relative; height: 100%; border-radius: 13.2cqw; overflow: hidden; background: #082238; }
.iphone__island { position: absolute; left: 50%; top: 2.6cqw; width: 27cqw; height: 7.8cqw; margin-left: -13.5cqw; border-radius: 4cqw; background: #000; }
.iphone__island i { position: absolute; right: 2.6cqw; top: 50%; width: 2.6cqw; height: 2.6cqw; margin-top: -1.3cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #2B3A66, #0A0E1C 60%); }
.iphone__glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 20%, transparent 36%, transparent 78%, rgba(255, 255, 255, .05) 100%); }
.iphone__shadow { position: absolute; left: 4%; right: -14%; bottom: -9cqw; height: 12cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(2, 10, 20, .5), transparent 72%); z-index: -1; }

/* the app inside the phone ("My Ocean") */
.ph { display: flex; flex-direction: column; height: 100%; padding: 0 5cqw 2.6cqw; background: linear-gradient(180deg, #156B86 0%, #0E3D5C 30%, #092740 62%, #071C30 100%); color: #F3F7FA; font-size: 3.5cqw; line-height: 1.3; text-align: left; }
.ph small { font-size: inherit; }
.ph-status { display: flex; align-items: center; justify-content: space-between; height: 13cqw; padding: 1.6cqw 3.4cqw 0; font-family: var(--font-display); font-size: 3.9cqw; font-weight: 650; }
.ph-status__r { display: flex; align-items: center; gap: 1.5cqw; }
.ph-sig { width: 4.4cqw; height: 2.9cqw; background: linear-gradient(90deg, #fff 0 18%, transparent 18% 27%, #fff 27% 45%, transparent 45% 54%, #fff 54% 72%, transparent 72% 81%, #fff 81%); clip-path: polygon(0 62%, 100% 0, 100% 100%, 0 100%); }
.ph-wifi { width: 4cqw; height: 2.9cqw; background: #fff; clip-path: polygon(50% 100%, 0 30%, 22% 8%, 50% 0, 78% 8%, 100% 30%); }
.ph-batt { position: relative; width: 6.4cqw; height: 3.1cqw; border: .3cqw solid rgba(255, 255, 255, .55); border-radius: 1cqw; }
.ph-batt::after { content: ''; position: absolute; left: .35cqw; top: .35cqw; bottom: .35cqw; width: 72%; border-radius: .45cqw; background: #fff; }
.ph-top { display: flex; align-items: center; justify-content: space-between; margin-top: 2.4cqw; }
.ph-top small { display: block; font-size: 3cqw; color: #B4C8D6; }
.ph-top strong { display: block; font-family: var(--font-display); font-size: 6.6cqw; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.ph-ava { width: 10.4cqw; height: 10.4cqw; padding: .7cqw; border-radius: 50%; border: .3cqw solid rgba(229, 197, 104, .7); }
.ph-card { margin-top: 3.2cqw; padding: 3.4cqw 3.6cqw; border-radius: 5cqw; border: .25cqw solid rgba(181, 221, 236, .16); background: rgba(255, 255, 255, .07); }
.ph-k { display: block; font-size: 2.35cqw !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); }
.ph-card strong { display: block; font-family: var(--font-display); font-size: 4.9cqw; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: .6cqw; }
.ph-card > span, .ph-progress__t span { display: block; font-size: 2.9cqw; color: #B4C8D6; }
.ph-progress { display: flex; align-items: center; gap: 3.6cqw; }
.ph-ring { position: relative; flex: none; width: 22cqw; height: 22cqw; }
.ph-ring svg { width: 100%; height: 100%; }
.ph-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.ph-ring b { font-family: var(--font-display); font-size: 8cqw; font-weight: 750; letter-spacing: -.04em; }
.ph-ring small { font-size: 2.5cqw; color: #B4C8D6; margin-top: .4cqw; }
.ph-cont { border-color: rgba(229, 197, 104, .42); background: linear-gradient(150deg, rgba(229, 197, 104, .24), rgba(229, 197, 104, .05) 70%); }
.ph-cont strong { font-size: 5.6cqw; }
.ph-cont__row { display: flex; align-items: center; gap: 2.2cqw; margin-top: 2.4cqw; font-size: 2.6cqw; color: #DCE8EF; }
.ph-bar { flex: 1; height: 1.5cqw; border-radius: 1cqw; background: rgba(255, 255, 255, .16); overflow: hidden; }
.ph-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-500), #F6E7B8); }
.ph-btn { display: grid !important; place-items: center; height: 9.6cqw; margin-top: 2.8cqw; border-radius: 5cqw; background: linear-gradient(180deg, #EBCB72, var(--gold-500)); color: #1B1303 !important; font-size: 3.4cqw !important; font-weight: 700; }
.ph-day .ar { font-size: 6.2cqw; line-height: 1.9; text-align: right; color: #FFF6DC; margin-top: .4cqw; }
.ph-strand { margin-top: 3.4cqw; }
.ph-strand__h { display: flex; justify-content: space-between; align-items: baseline; font-size: 2.6cqw; color: #B4C8D6; }
.ph-pearls { display: flex; justify-content: space-between; margin-top: 1.8cqw; }
.ph-pearls span { width: 9.2cqw; height: 9.2cqw; }
.ph-pearls .is-now { border-radius: 50%; box-shadow: 0 0 0 .35cqw var(--gold-300); }
.ph-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: auto; padding-top: 2.4cqw; border-top: .25cqw solid rgba(181, 221, 236, .14); }
.ph-tabs span { display: grid; justify-items: center; gap: .6cqw; font-size: 2.05cqw; letter-spacing: -.01em; white-space: nowrap; font-weight: 600; color: #8FA9BB; }
.ph-tabs .i, .ph-tabs i { width: 4.8cqw; height: 4.8cqw; }
.ph-tabs .is-on { color: var(--gold-300); }
.ph-home { display: block; width: 34cqw; height: 1.2cqw; margin: 2.6cqw auto 0; border-radius: 1cqw; background: rgba(255, 255, 255, .65); }

@media (max-width: 1020px) {
  .hero { min-height: 0; padding-top: calc(66px + 1.6rem); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__visual { width: min(100%, 460px); margin-top: .5rem; }
  .hero__scroll { display: none; }
}
@media (max-width: 520px) {
  .hero__cta { display: grid; width: 100%; }
  .hero__cta .btn { width: 100%; --btn-h: 58px; font-size: 1.05rem; }
}

/* ───────────────────────────── 2 · numbers on a strand ───────────────────────────── */
main > section.nums { --sea-top: #0A2438; --sea-mid: #092136; --sea-bottom: #081D30; padding: clamp(1.5rem, 4vw, 3rem) 0 calc(clamp(3.5rem, 7vw, 6rem) + clamp(40px, 7vw, 110px)); color: #F3F7FA; }
.nums__strand { position: relative; --h: clamp(96px, 11vw, 150px); }
.nums__thread { position: absolute; left: 0; top: 0; width: 100%; height: var(--h); overflow: visible; }
.nums__list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; text-align: center; }
.num { display: grid; justify-items: center; align-content: start; padding-top: calc(var(--y) * var(--h) - 26px); }
.num__pearl { width: 52px; height: 52px; margin-bottom: .9rem; }
.num__n { font-family: var(--font-display); font-size: clamp(3.2rem, 1.4rem + 6.4vw, 7.4rem); font-weight: 750; line-height: .92; letter-spacing: -.055em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #FFF6DC 0%, var(--gold-300) 45%, var(--gold-500) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline: .06em; }
.num__l { margin-top: .7rem; font-size: var(--fs-sm); font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: #F3F7FA; }
.num__s { margin-top: .3rem; font-size: var(--fs-sm); color: var(--text-mute); max-width: 22ch; }
@media (max-width: 760px) {
  .nums__thread { display: none; }
  .nums__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem .75rem; }
  .num { padding-top: 0; }
  .num__pearl { width: 40px; height: 40px; margin-bottom: .6rem; }
  .num__l { letter-spacing: .1em; font-size: .78rem; }
}

/* ───────────────────────────── 3 · how it works ───────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 2rem); margin: 0; padding: 0; }
.step { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-2); overflow: hidden; }
.step__art { position: relative; display: grid; place-items: center; height: 372px; padding: 1.2rem; overflow: hidden; }
.step__art--read { background: linear-gradient(160deg, #F6F0E2, #EADFC6); }
.step__art--quiz { background: linear-gradient(170deg, #13607A, #0B3350 60%, #082238); color: #F3F7FA; }
.step__art--pearl { background: radial-gradient(120% 90% at 50% 0, #0E3D5C, #071C30 70%, #051526); color: #F3F7FA; padding: 0; }
.step__text { display: grid; align-content: start; gap: .6rem; padding: 1.5rem clamp(1.2rem, 2vw, 1.8rem) 1.9rem; }
.step__n { display: inline-flex; align-items: center; gap: .7em; font-family: var(--font-display); font-size: .95rem; font-weight: 700; letter-spacing: .08em; color: var(--accent); }
.step__n::after { content: ''; width: 2.4em; height: 1px; background: currentColor; opacity: .6; }
.step__text h3 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.9rem); }
.step__text p { color: var(--text-soft); }

.reader { display: grid; gap: .7rem; justify-items: center; width: 100%; color: #0B2236; }
.reader__bar { display: flex; justify-content: space-between; gap: .8rem; width: min(100%, 300px); font-size: .74rem; font-weight: 650; color: #5B5238; }
.reader__bar .i { width: 1.1em; height: 1.1em; color: var(--gold-600); }
.reader__page { height: 252px; aspect-ratio: 987 / 1418; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(60, 44, 8, .2), 0 14px 30px rgba(60, 44, 8, .24); }
.reader__page img { width: 100%; height: 100%; object-fit: cover; }
.reader__nav { display: flex; align-items: center; gap: .5rem; }
.reader__arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(116, 91, 14, .35); color: #5B4508; background: rgba(255, 255, 255, .6); transition: background-color var(--t-med), transform var(--t-fast); }
.reader__arrow:hover { background: #fff; }
.reader__arrow:active { transform: scale(.92); }
.reader__arrow .i { width: 1rem; height: 1rem; }
.reader__dots { display: flex; gap: 2px; }
.reader__dots button { position: relative; width: 16px; height: 24px; }
.reader__dots button::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgba(116, 91, 14, .28); transition: transform var(--t-med) var(--ease-spring), background-color var(--t-med); }
.reader__dots button.is-on::after { background: var(--gold-600); transform: scale(1.5); }

.quiz { display: grid; gap: .8rem; width: 100%; max-width: 330px; padding: 1.1rem; border-radius: var(--r-lg); border: 1px solid rgba(181, 221, 236, .2); background: rgba(3, 13, 26, .42); }
.quiz__top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.quiz__k { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-300); }
.quiz__res { font-size: .78rem; font-weight: 700; padding: .25em .8em; border-radius: var(--r-pill); }
.quiz__res:empty { display: none; }
.quiz__res.is-ok { background: rgba(47, 184, 138, .2); color: #6EE0B8; }
.quiz__res.is-no { background: rgba(229, 72, 77, .2); color: #FF9A9D; }
.quiz__q { font-family: var(--font-display); font-size: 1.12rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
.quiz__opts { display: grid; gap: .5rem; }
.quiz__opt { display: flex; align-items: center; gap: .7rem; min-height: 46px; padding: .4rem .8rem; border-radius: 14px; border: 1.5px solid rgba(181, 221, 236, .24); background: rgba(255, 255, 255, .05); text-align: left; font-weight: 600; color: #F3F7FA; transition: border-color var(--t-med), background-color var(--t-med), transform var(--t-fast), opacity var(--t-med); }
.quiz__opt b { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-family: var(--font-display); font-size: .8rem; }
.quiz__opt:not(:disabled):hover { border-color: var(--gold-300); background: rgba(229, 197, 104, .1); }
.quiz__opt:active { transform: scale(.98); }
.quiz__opt:disabled { cursor: default; opacity: .55; }
.quiz__opt.is-picked { opacity: 1; }
.quiz__opt.is-picked.is-ok { border-color: #2FB88A; background: rgba(47, 184, 138, .18); }
.quiz__opt.is-picked.is-no { border-color: #E5484D; background: rgba(229, 72, 77, .16); }
.quiz__again { display: inline-flex; align-items: center; justify-content: center; gap: .4em; font-size: .8rem; font-weight: 650; color: var(--gold-300); padding: .3rem; }
.quiz__again .i { width: 1em; height: 1em; }

.unlock { position: relative; display: grid; place-items: center; align-content: center; gap: .6rem; width: 100%; height: 100%; color: inherit; border-radius: 0; }
.unlock:focus-visible { outline-offset: -6px; }
.unlock__shell { position: relative; width: min(62%, 220px); margin-top: 1.4rem; }
.unlock__cap { position: relative; display: grid; gap: .1rem; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out) .9s, transform .6s var(--ease-out) .9s; }
.unlock.is-open .unlock__cap { opacity: 1; transform: none; }
.unlock__cap strong { font-family: var(--font-display); font-size: 1.2rem; color: #FFF6DC; }
.unlock__cap small { font-size: .78rem; color: #B4C8D6; }
.unlock__rings { position: absolute; left: 50%; top: 47%; width: 0; height: 0; }
.unlock__rings i, .hadith__rings i { position: absolute; left: -130px; top: -130px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(229, 197, 104, .45); opacity: 0; animation: ring-out 4.5s ease-out infinite; }
.unlock__rings i:nth-child(2), .hadith__rings i:nth-child(2) { animation-delay: 1.5s; }
.unlock__rings i:nth-child(3), .hadith__rings i:nth-child(3) { animation-delay: 3s; }
@keyframes ring-out { 0% { transform: scale(.25); opacity: 0; } 20% { opacity: .8; } 100% { transform: scale(1.25); opacity: 0; } }

.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(1.2rem, 2.5vw, 2rem); }
.rule { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: var(--r-lg); border: 1px dashed rgba(166, 123, 36, .5); background: rgba(204, 153, 51, .07); color: var(--text-soft); }
.rule strong { color: var(--text); }
.rule__i { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(180deg, #EBCB72, var(--gold-500)); color: #1B1303; }
@media (max-width: 900px) {
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .rules { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
}

/* ───────────────────────────── 4 · the dive (36 pearls) ───────────────────────────── */
.dive { isolation: isolate; overflow: hidden; overflow: clip; padding-top: var(--section-y); color: #F3F7FA; background: linear-gradient(180deg, #1E94A6 0%, #15788F 14%, #0E5A78 32%, #0B4163 50%, #0A2C4C 68%, #071C33 85%, #051526 100%); --text: #F3F7FA; --text-soft: #D5E6EE; --accent: #FFF1B8; }
.dive .lead { color: #E3F1F5; }
.dive__layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.chart { position: relative; --zh: 124px; --ps: 46px; border-radius: var(--r-xl); border: 1px solid rgba(255, 255, 255, .16); background: rgba(3, 13, 26, .16); overflow: hidden; }
.chart__path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.zone { position: relative; height: var(--zh); }
.zone + .zone { border-top: 1px dashed rgba(255, 255, 255, .16); }
.zone__l { position: absolute; left: 1rem; right: 1rem; top: .55rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.zone__l span:last-child { color: rgba(255, 241, 184, .85); letter-spacing: .08em; }
.pl { position: absolute; width: var(--ps); height: var(--ps); margin: calc(var(--ps) / -2) 0 0 calc(var(--ps) / -2); border-radius: 50%; transition: transform .4s var(--ease-spring); }
.pl::before { content: ''; position: absolute; inset: -7px; }
.pl::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--gold-300); opacity: 0; transform: scale(.7); transition: opacity var(--t-med), transform .4s var(--ease-spring); }
.pl svg { width: 100%; height: 100%; }
.pl.is-on { transform: scale(1.2); z-index: 2; }
.pl.is-on::after { opacity: 1; transform: none; }
.pl:focus-visible { outline-offset: 7px; border-radius: 50%; }
.pl__n { position: absolute; left: 50%; top: calc(100% + 3px); width: 30px; margin-left: -15px; font-family: var(--font-display); font-size: .68rem; font-weight: 650; text-align: center; color: rgba(255, 255, 255, .72); pointer-events: none; }
.probe { position: sticky; top: 96px; z-index: 3; display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--r-xl); border: 1px solid rgba(229, 197, 104, .38); background: linear-gradient(170deg, rgba(8, 40, 62, .96), rgba(5, 19, 33, .96)); box-shadow: var(--shadow-3); }
.probe__top { display: flex; align-items: center; gap: 1rem; }
.probe__pearl { width: 84px; height: 84px; flex: none; }
.probe__k { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); }
.probe__t { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin-top: .2rem; }
.probe__meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.probe__meta span { padding: .3em .8em; border-radius: var(--r-pill); border: 1px solid rgba(181, 221, 236, .22); font-size: .78rem; font-weight: 600; color: #DCE8EF; white-space: nowrap; }
.probe__meta span.is-gold { border-color: rgba(229, 197, 104, .5); color: var(--gold-300); }
.probe__theme { font-size: var(--fs-sm); color: #B4C8D6; min-height: 3.2em; }
.probe__gauge { display: grid; gap: .45rem; font-size: .74rem; font-weight: 600; color: #8FA9BB; }
.probe__gauge div { display: flex; justify-content: space-between; }
.probe__gauge i { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.probe__gauge i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--aqua-300), var(--gold-300)); transform-origin: 0 50%; transform: scaleX(var(--p, .03)); transition: transform .6s var(--ease-out); }
@media (max-width: 1020px) {
  .dive__layout { grid-template-columns: minmax(0, 1fr); }
  .probe { position: sticky; top: auto; bottom: 4rem; gap: .5rem; padding: .8rem 1rem; border-radius: var(--r-lg); }
  .probe__pearl { width: 50px; height: 50px; }
  .probe__t { font-size: 1.12rem; }
  .probe__theme, .probe__gauge { display: none; }
  .probe__top { gap: .8rem; }
}
@media (max-width: 560px) {
  .chart { --zh: 112px; --ps: 38px; }
  .zone__l { left: .7rem; right: .7rem; font-size: .6rem; letter-spacing: .12em; }
  .probe__meta span { font-size: .72rem; padding: .25em .65em; }
}

/* ───────────────────────────── 5 · the printed book ───────────────────────────── */
.bookx__grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.bookx__text { display: grid; gap: 1.3rem; justify-items: start; }
.ticks { display: grid; gap: 1.1rem; padding: 0; margin: .4rem 0; }
.ticks li { display: flex; gap: 1rem; align-items: flex-start; }
.ticks__i { width: 36px; height: 36px; margin-top: .1rem; }
.ticks strong { display: block; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.01em; }
.ticks p { color: var(--text-soft); font-size: .97rem; margin-top: .15rem; }
.bookx__stage { display: grid; gap: 1.6rem; justify-items: center; min-width: 0; }
.flip { position: relative; width: min(100%, 640px); perspective: 2200px; touch-action: pan-y; padding: 12px 12px 0; }
.flip__book { position: relative; width: 100%; aspect-ratio: 1974 / 1418; transform-style: preserve-3d; transform: rotateX(9deg); transition: transform 1s var(--ease-out); }
.flip.is-closed .flip__book { transform: translateX(-23%) rotateX(11deg) rotateY(24deg); }
.flip__book::before, .flip__book::after { content: ''; position: absolute; top: -9px; bottom: -9px; width: calc(50% + 10px); background: linear-gradient(180deg, #D9AE4C, #A67B24); transform: translateZ(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset; }
.flip__book::before { right: -10px; border-radius: 3px 12px 12px 3px; }
.flip__book::after { left: -10px; border-radius: 12px 3px 3px 12px; opacity: 1; transition: opacity .5s var(--ease-out); }
.flip:not(.has-left) .flip__book::after { opacity: 0; transition-duration: .15s; }
/* closed: spine and the bottom edge of the page block give the cover its thickness */
.flip__spine, .flip__block { position: absolute; --t: clamp(18px, 3.4vw, 34px); opacity: 0; transition: opacity .3s var(--ease-out); pointer-events: none; }
.flip__spine { left: calc(50% - var(--t) / 2); top: -9px; bottom: -9px; width: var(--t); transform: translateZ(calc(var(--t) / -2 - 3px)) rotateY(-90deg); border-radius: 3px; background: linear-gradient(90deg, #7B5A10 0%, #C99A35 24%, #E5C568 50%, #C38919 74%, #7B5A10 100%); }
.flip__block { left: calc(50% + 3px); right: 6px; top: calc(100% - var(--t) / 2); height: var(--t); transform: translateZ(calc(var(--t) / -2 - 3px)) rotateX(-90deg) scaleY(.8); background: repeating-linear-gradient(0deg, #FBF7EC 0 2px, #D8CDB6 2px 3px); }
.flip.is-closed .flip__spine, .flip.is-closed .flip__block { opacity: 1; transition-delay: .35s; }
.flip__half, .flip__face { background: #fff; overflow: hidden; }
.flip__half { position: absolute; top: 0; width: 50%; height: 100%; }
.flip__half--l { left: 0; border-radius: 5px 0 0 5px; }
.flip__half--r { left: 50%; border-radius: 0 5px 5px 0; }
.flip__half.is-empty { visibility: hidden; }
.flip__leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; transform: translateZ(1px); z-index: 3; }
.flip__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__face--front { border-radius: 0 5px 5px 0; }
.flip__face--back { transform: rotateY(180deg); border-radius: 5px 0 0 5px; }
.flip img { width: 100%; height: 100%; object-fit: cover; }
.flip__half--r::after, .flip__face--front::after, .flip__half--l::after, .flip__face--back::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.flip__half--r::after, .flip__face--front::after { background: linear-gradient(90deg, rgba(40, 28, 0, .2) 0, rgba(40, 28, 0, .05) 6%, transparent 16%); }
.flip__half--l::after, .flip__face--back::after { background: linear-gradient(270deg, rgba(40, 28, 0, .2) 0, rgba(40, 28, 0, .05) 6%, transparent 16%); }
.flip__gutter { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(40, 28, 0, .18); transform: translateZ(2px); transition: opacity .4s; }
.flip.is-closed .flip__gutter { opacity: 0; }
.flip__end { display: grid; place-content: center; justify-items: center; gap: .8rem; height: 100%; padding: 8%; text-align: center; background: linear-gradient(150deg, #FBF6EA, #F1E6CC); color: #745B0E; }
.flip__end b { font-family: var(--font-quote); font-style: italic; font-weight: 400; font-size: clamp(1rem, 3.2vw, 1.9rem); line-height: 1.15; }
.flip__end small { font-size: clamp(.55rem, 1.3vw, .75rem); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.flip__end span { width: clamp(28px, 7vw, 54px); height: clamp(28px, 7vw, 54px); }
.flip__shadow { display: block; height: 30px; margin: 6px 4% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 56, 80, .32), transparent 72%); transition: transform 1s var(--ease-out); }
.flip.is-closed .flip__shadow { transform: translateX(-2%) scaleX(.5); }
.flip__ctrl { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.flip__btn { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--gold-500); color: var(--gold-800); background: var(--surface); box-shadow: var(--shadow-1); transition: background-color var(--t-med), color var(--t-med), transform var(--t-fast), opacity var(--t-med); }
.flip__btn:hover:not(:disabled) { background: var(--gold-500); color: #1B1303; }
.flip__btn:active { transform: scale(.93); }
.flip__btn:disabled { opacity: .35; cursor: default; }
.flip__label { min-width: 11.5em; text-align: center; font-family: var(--font-display); font-weight: 650; font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .bookx__grid { grid-template-columns: minmax(0, 1fr); }
  .flip { padding-inline: 10px; }
}

/* ───────────────────────────── 6 · programme video ───────────────────────────── */
.film { --sea-top: #0B3350; --sea-mid: #0A2D48; --sea-bottom: #0A2A44; color: #F3F7FA; }
.film__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.film__text { display: grid; gap: 1.2rem; justify-items: start; }
.film__facts { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; }
.film__facts li { display: inline-flex; align-items: center; gap: .5em; padding: .45em .95em; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--glass); font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); }
.film__facts .i { color: var(--gold-300); width: 1.1em; height: 1.1em; }
.player { position: relative; min-width: 0; }
.player::before, .player::after { content: ''; position: absolute; width: 64px; height: 64px; border: 1.5px solid var(--gold-300); pointer-events: none; }
.player::before { left: -10px; top: -10px; border-right: 0; border-bottom: 0; border-radius: 26px 0 0 0; }
.player::after { right: -10px; bottom: -10px; border-left: 0; border-top: 0; border-radius: 0 0 26px 0; }
.player__frame { position: relative; aspect-ratio: 16 / 9; padding: 8px; border-radius: var(--r-xl); border: 1px solid rgba(229, 197, 104, .45); background: #030D1A; box-shadow: var(--shadow-3); }
.player__video, .player__poster { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); border-radius: calc(var(--r-xl) - 8px); }
.player__video { background: #000; object-fit: contain; }
.player__poster { display: block; overflow: hidden; color: #F3F7FA; text-align: left; background: linear-gradient(160deg, #14647F 0%, #0B3350 45%, #051526 100%); }
.player__scene { position: absolute; inset: 0; }
.player__rays { position: absolute; inset: -10% -30% 0; background: repeating-linear-gradient(98deg, transparent 0 6%, rgba(255, 255, 255, .06) 8% 10%, transparent 13% 20%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%); mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.player__shell { position: absolute; right: 6%; bottom: 6%; width: 30%; opacity: .95; }
.player__title { position: absolute; left: 6%; bottom: 9%; display: grid; font-family: var(--font-display); font-size: clamp(1.3rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.player__title small { font-family: var(--font-body); font-size: clamp(.6rem, 1.1vw, .74rem); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); margin-bottom: .7em; }
.player__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(68px, 10vw, 104px); height: clamp(68px, 10vw, 104px); margin: calc(clamp(68px, 10vw, 104px) / -2) 0 0 calc(clamp(68px, 10vw, 104px) / -2); border-radius: 50%; background: linear-gradient(180deg, #EBCB72, var(--gold-500)); color: #1B1303; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 34px rgba(2, 10, 20, .5); transition: transform .4s var(--ease-spring); }
.player__play svg { position: relative; margin-left: 4px; }
.player__play i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--gold-300); animation: play-pulse 2.6s ease-out infinite; }
@keyframes play-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.75); opacity: 0; } }
.player__poster:hover .player__play { transform: scale(1.08); }
.player__poster:focus-visible { outline-offset: 4px; }
.player__time { position: absolute; right: 5%; top: 7%; padding: .3em .8em; border-radius: var(--r-pill); background: rgba(3, 13, 26, .6); font-size: .78rem; font-weight: 650; }
@media (max-width: 960px) { .film__grid { grid-template-columns: minmax(0, 1fr); } .player::before { left: -6px; top: -6px; } .player::after { right: -6px; bottom: -6px; } }

/* ───────────────────────────── 7 · vision & mission ───────────────────────────── */
.panel { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.panel + .panel { margin-top: clamp(3rem, 7vw, 6.5rem); }
.panel--flip .panel__art { order: 2; }
.panel__art { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-3); background: linear-gradient(165deg, #1A8298 0%, #0E4C6C 42%, #071F36 100%); }
.panel__art--mission { background: linear-gradient(195deg, #123E5C 0%, #0A2740 50%, #051526 100%); }
.panel__rays { position: absolute; inset: -10% -30% 0; background: repeating-linear-gradient(98deg, transparent 0 6%, rgba(255, 255, 255, .08) 8% 10.5%, transparent 13% 20%, rgba(229, 197, 104, .06) 22% 24%, transparent 27% 33%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%); mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.pg, .ms { position: absolute; }
.pg { width: 35%; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 2px 4px rgba(2, 10, 20, .3), 0 18px 40px rgba(2, 10, 20, .45); }
.pg--a { left: 8%; top: 17%; transform: rotate(-9deg); }
.pg--c { right: 8%; top: 17%; transform: rotate(8deg); }
.pg--b { left: 31%; top: 9%; width: 38%; }
.panel__pearl { position: absolute; }
.panel__pearl--1 { left: 45%; bottom: 5%; width: 11%; aspect-ratio: 1; }
.panel__pearl--2 { right: 9%; bottom: 8%; width: 6%; aspect-ratio: 1; }
.panel__tag { position: absolute; left: 5%; top: 6%; padding: .4em .95em; border-radius: var(--r-pill); background: rgba(3, 13, 26, .55); border: 1px solid rgba(229, 197, 104, .45); color: var(--gold-300); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ms--cover { left: 9%; top: 9%; width: 37%; height: auto; border-radius: 3px 8px 8px 3px; transform: rotate(-6deg); box-shadow: 0 2px 4px rgba(2, 10, 20, .3), 0 20px 44px rgba(2, 10, 20, .5); }
.ms--cert { right: 8%; top: 13%; width: 41%; height: auto; border-radius: 4px; transform: rotate(5deg); box-shadow: 0 2px 4px rgba(2, 10, 20, .3), 0 20px 44px rgba(2, 10, 20, .5); }
.ms--shell { left: 37%; bottom: 1%; width: 28%; }
.panel__text { display: grid; gap: 1.1rem; justify-items: start; }
.panel__k { display: inline-flex; align-items: center; gap: .6em; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.panel__k::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--gold-300) 55%, var(--gold-600)); }
.panel__h { font-size: clamp(1.75rem, 1.05rem + 2.3vw, 3rem); line-height: 1.14; letter-spacing: -.01em; text-wrap: balance; color: var(--text); }
.panel__text p { color: var(--text-soft); font-size: 1.05rem; max-width: 52ch; }
.panel__pts { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; }
.panel__pts li { padding: .5em 1.1em; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-family: var(--font-display); font-weight: 650; }
.panel__steps { display: grid; gap: .6rem; padding: 0; width: 100%; }
.panel__steps li { display: flex; align-items: center; gap: .9rem; padding: .75rem 1rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-weight: 600; }
.panel__steps span { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, #EBCB72, var(--gold-500)); color: #1B1303; font-family: var(--font-display); font-size: .85rem; font-weight: 700; }
@media (max-width: 900px) {
  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel--flip .panel__art { order: 0; }
}

/* ───────────────────────────── 8 · hadith ───────────────────────────── */
.hadith { --sea-top: #0A2A44; --sea-mid: #082439; --sea-bottom: #082238; color: #F3F7FA; text-align: center; padding-top: clamp(5rem, 10vw, 9rem); }
.hadith__in { display: grid; justify-items: center; gap: clamp(1.4rem, 3vw, 2.2rem); }
.hadith__scene { position: relative; width: 84px; height: 84px; }
.hadith__rings { position: absolute; left: 50%; top: 50%; }
.hadith__pearl { position: relative; width: 84px; height: 84px; animation: pearl-float 6s ease-in-out infinite; }
.hadith__fig { display: grid; gap: 1.4rem; justify-items: center; }
.hadith__q { font-size: clamp(2.3rem, 1rem + 5.4vw, 5.2rem); line-height: 1.08; text-wrap: balance; color: #FFF6DC; }
.hadith__src { display: flex; align-items: center; gap: 1rem; font-size: var(--fs-sm); font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); }
.hadith__src span { width: clamp(24px, 6vw, 60px); height: 1px; background: currentColor; opacity: .6; }
.hadith__after { max-width: 44ch; font-size: var(--fs-xl); color: #C9DAE5; }

/* ───────────────────────────── 9 · competition ───────────────────────────── */
.comp__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.comp__text { display: grid; gap: 1.2rem; justify-items: start; }
.prize { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2.2rem; margin: .2rem 0; }
.prize dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.prize dd { margin: .1rem 0 0; font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 750; letter-spacing: -.04em; line-height: 1; }
.prize__main { flex-basis: 100%; }
.prize__main dd { font-size: clamp(3.4rem, 1.6rem + 7vw, 6.6rem); background: linear-gradient(100deg, var(--gold-800), var(--gold-500) 55%, var(--gold-600)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: .95; }
.comp__facts { display: grid; gap: .7rem; padding: 0; }
.comp__facts li { display: flex; gap: .8rem; align-items: flex-start; color: var(--text-soft); }
.comp__facts .i { flex: none; margin-top: .15em; color: var(--gold-600); }
.comp__facts strong { color: var(--text); }
.comp__poster { display: block; border-radius: var(--r-xl); overflow: hidden; border: 1px solid rgba(166, 123, 36, .3); box-shadow: var(--shadow-3); background: #fff; transition: transform .5s var(--ease-out); }
.comp__poster img { width: 100%; }
.match { margin-top: clamp(2.5rem, 6vw, 5rem); padding: clamp(1.2rem, 3vw, 2.4rem); border-radius: var(--r-2xl); background: linear-gradient(170deg, #0E3D5C, #071C30); color: #F3F7FA; box-shadow: var(--shadow-3); --text: #F3F7FA; --text-soft: #B4C8D6; }
.match__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; margin-bottom: 1.6rem; }
.match__k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); }
.match__head h3 { margin-top: .5rem; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem); }
.match__head p { color: #B4C8D6; }
.match__board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(.6rem, 2vw, 1.4rem); }
.match__col { display: grid; gap: .6rem; align-content: start; }
.tile { position: relative; display: grid; align-items: center; min-height: 76px; padding: .6rem 1rem; border-radius: var(--r-md); border: 1.5px solid rgba(181, 221, 236, .24); background: rgba(255, 255, 255, .05); color: #F3F7FA; font-weight: 600; text-align: left; line-height: 1.35; transition: border-color var(--t-med), background-color var(--t-med), transform var(--t-fast), opacity var(--t-med); }
.tile.ar { font-size: clamp(1.15rem, .9rem + 1.2vw, 1.7rem); text-align: right; line-height: 1.9; font-weight: 400; color: #FFF6DC; }
.tile:not(:disabled):hover { border-color: rgba(229, 197, 104, .7); }
.tile:active { transform: scale(.985); }
.tile.is-sel { border-color: var(--gold-300); background: rgba(229, 197, 104, .16); }
.tile.is-done { border-color: rgba(47, 184, 138, .7); background: rgba(47, 184, 138, .14); cursor: default; }
.tile.is-done::after { content: attr(data-pair); position: absolute; left: -8px; top: -8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2FB88A; color: #03222B; font: 700 .75rem/1 var(--font-display); }
.tile.is-bad { animation: tile-no .4s ease-in-out; border-color: #E5484D; }
@keyframes tile-no { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.match__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; min-height: 40px; margin-top: 1.2rem; }
.match__status { font-weight: 600; color: #DCE8EF; }
.match__status.is-win { color: #6EE0B8; }
@media (max-width: 900px) {
  .comp__grid { grid-template-columns: minmax(0, 1fr); }
  .match__head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) { .tile { padding: .5rem .7rem; font-size: .9rem; min-height: 92px; } }

/* ───────────────────────────── 10 · features (bento) ───────────────────────────── */
.feat { --sea-top: #082238; --sea-mid: #071C30; --sea-bottom: #061828; color: #F3F7FA; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.8rem, 1.4vw, 1.2rem); }
.cell { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem; min-height: 250px; padding: clamp(1.2rem, 2vw, 1.7rem); border-radius: var(--r-xl); border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)); overflow: hidden; min-width: 0; }
.cell__text { display: grid; gap: .45rem; justify-items: start; }
.cell h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height: 1.15; }
.cell p { color: var(--text-soft); font-size: .96rem; }
.cell--cert { grid-column: span 5; grid-row: span 2; justify-content: flex-start; background: linear-gradient(170deg, rgba(229, 197, 104, .2), rgba(229, 197, 104, .03) 60%); border-color: rgba(229, 197, 104, .38); }
.cell--free { grid-column: span 4; }
.cell--phone { grid-column: span 3; }
.cell--sync { grid-column: span 7; }
.cell--sound, .cell--guest, .cell--android { grid-column: span 4; }
.cell__cert { width: min(70%, 300px); margin: .6rem auto .4rem; transform: rotate(-3deg); transition: transform .6s var(--ease-out); }
.cell--cert:hover .cell__cert { transform: rotate(-1deg) translateY(-8px); }
.free { font-family: var(--font-display); font-size: clamp(5rem, 3rem + 7vw, 9rem); font-weight: 780; line-height: .8; letter-spacing: -.06em; background: linear-gradient(180deg, #FFF6DC, var(--gold-300) 50%, var(--gold-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.free span { font-size: .5em; vertical-align: .55em; margin-right: .06em; letter-spacing: 0; }
.devices { position: relative; height: 96px; }
.dev { position: absolute; bottom: 0; border: 2px solid rgba(181, 221, 236, .6); background: #082238; }
.dev i { position: absolute; inset: 3px; border-radius: inherit; background: linear-gradient(160deg, #15708A, #0A2438); }
.dev i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--gold-300) 60%, var(--gold-600)); }
.dev--lap { left: 0; width: 124px; height: 78px; border-radius: 8px 8px 0 0; margin-bottom: 6px; }
.dev--lap::after { content: ''; position: absolute; left: -12px; right: -12px; bottom: -8px; height: 6px; border-radius: 0 0 8px 8px; background: rgba(181, 221, 236, .6); }
.dev--tab { left: 96px; width: 62px; height: 84px; border-radius: 9px; }
.dev--ph { left: 146px; width: 36px; height: 68px; border-radius: 9px; border-color: var(--gold-300); }
.sync { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.sync__app { padding: .45em 1em; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: var(--fs-sm); font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.sync__app.is-on { border-color: var(--gold-300); background: rgba(229, 197, 104, .16); color: var(--gold-300); }
.sync__line { flex: 1 1 40px; min-width: 24px; height: 0; border-top: 1.5px dashed rgba(229, 197, 104, .55); }
.sync__acct { display: grid; grid-template-columns: auto auto; column-gap: .7rem; align-items: center; padding: .5rem 1.1rem .5rem .5rem; border-radius: var(--r-pill); background: rgba(3, 13, 26, .5); border: 1px solid var(--line-strong); line-height: 1.15; }
.sync__acct [data-pearl] { grid-row: span 2; width: 40px; height: 40px; }
.sync__acct b { font-size: var(--fs-sm); }
.sync__acct small { font-size: .74rem; color: var(--text-mute); }
.snd { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.snd__bars { display: flex; align-items: flex-end; gap: 5px; height: 56px; }
.snd__bars i { width: 7px; height: 100%; border-radius: 4px; background: linear-gradient(180deg, var(--gold-300), var(--teal-500)); transform-origin: 50% 100%; animation: snd 1.2s ease-in-out infinite alternate; }
.snd__bars i:nth-child(1) { animation-delay: -.9s; } .snd__bars i:nth-child(2) { animation-delay: -.3s; } .snd__bars i:nth-child(3) { animation-delay: -.7s; } .snd__bars i:nth-child(4) { animation-delay: -.1s; } .snd__bars i:nth-child(5) { animation-delay: -.5s; }
@keyframes snd { from { transform: scaleY(.18); } to { transform: scaleY(1); } }
.snd.is-off .snd__bars i { animation: none; transform: scaleY(.12); opacity: .5; }
.guest { display: inline-flex; align-items: center; gap: .9rem; align-self: flex-start; padding: .6rem 1.2rem .6rem .6rem; border-radius: var(--r-pill); border: 1px dashed rgba(181, 221, 236, .4); }
.guest__ava { width: 46px; height: 46px; border-radius: 50%; border: 2px dashed rgba(181, 221, 236, .6); background: radial-gradient(circle at 36% 30%, rgba(95, 126, 150, .6), rgba(11, 34, 54, .8)); }
.guest__t { display: grid; line-height: 1.2; }
.guest__t small { font-size: .78rem; font-weight: 650; color: var(--warn); }
.droid { display: flex; align-items: center; gap: 1rem; }
@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cell--cert { grid-column: span 6; grid-row: auto; }
  .cell__cert { width: min(60%, 300px); }
  .cell--free, .cell--phone { grid-column: span 3; }
  .cell--sync { grid-column: span 6; }
  .cell--sound, .cell--guest { grid-column: span 3; }
  .cell--android { grid-column: span 6; min-height: 0; }
}
@media (max-width: 640px) {
  .cell, .cell--free, .cell--phone, .cell--sound, .cell--guest { grid-column: span 6; min-height: 0; }
  .cell__cert { width: min(74%, 300px); }
}

/* ───────────────────────────── 11 · get involved ───────────────────────────── */
.join__head { max-width: 900px; }
.join__head .lead { max-width: 62ch; }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); }
.role { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); overflow: hidden; }
.role__art { position: relative; height: 270px; overflow: hidden; background: linear-gradient(160deg, #F6F0E2, #E9DDC2); }
.role__art--deep { display: grid; align-content: center; padding: 1.4rem 1.2rem; background: linear-gradient(170deg, #14647F, #0A2C4C 60%, #061828); }
.role__rays { position: absolute; inset: -10% -30% 0; background: repeating-linear-gradient(98deg, transparent 0 6%, rgba(255, 255, 255, .07) 8% 10.5%, transparent 13% 20%); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%); mask-image: linear-gradient(to bottom, #000, transparent 90%); }
.role__cap { position: relative; margin-top: .4rem; text-align: center; font-family: var(--font-quote); font-style: italic; font-size: 1.15rem; color: #FFF6DC; }
.role__art--deep [data-strand-full] { position: relative; }
.bk { position: absolute; top: 12%; width: 34%; height: auto; border-radius: 3px 7px 7px 3px; box-shadow: 0 2px 4px rgba(60, 44, 8, .25), 0 16px 30px rgba(60, 44, 8, .3); }
.bk--1 { left: 33%; z-index: 3; }
.bk--2 { left: 12%; top: 18%; transform: rotate(-9deg); z-index: 2; }
.bk--3 { left: 54%; top: 18%; transform: rotate(9deg); z-index: 1; }
.role__chip { position: absolute; left: 50%; bottom: .9rem; z-index: 4; display: inline-flex; align-items: center; gap: .5em; padding: .45em 1em; border-radius: var(--r-pill); background: #0B2438; color: #F3F7FA; font-size: .78rem; font-weight: 650; white-space: nowrap; transform: translateX(-50%); }
.role__chip .i { color: var(--gold-300); width: 1.1em; height: 1.1em; }
.mosaic { position: absolute; left: -4%; right: -4%; top: 14%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.5%; transform: rotate(-5deg); }
.mosaic img { width: 100%; height: auto; border-radius: 3px; background: #fff; box-shadow: 0 2px 4px rgba(60, 44, 8, .2), 0 12px 24px rgba(60, 44, 8, .26); }
.mosaic img:nth-child(even) { transform: translateY(16%); }
.role__text { display: grid; align-content: start; justify-items: start; gap: .7rem; padding: 1.5rem clamp(1.2rem, 2vw, 1.8rem) 1.8rem; }
.role__k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.role__text h3 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); }
.role__text p { color: var(--text-soft); }
.role__text .btn { margin-top: .5rem; white-space: normal; text-align: center; line-height: 1.2; padding-block: .6em; }
@media (max-width: 960px) { .roles { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }

/* ───────────────────────────── 12 · FAQ ───────────────────────────── */
main > section.faq { background: var(--bg-2); border-top: 1px solid var(--line); }
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__side { display: grid; gap: 1.2rem; justify-items: start; }
.faq__art { width: min(60%, 220px); margin-top: 1rem; }
.faq__list { padding: .4rem clamp(1.1rem, 2.4vw, 2rem); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.faq__list .acc:last-child { border-bottom: 0; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: minmax(0, 1fr); } .faq__art { display: none; } }

/* ───────────────────────────── 13 · final call to action ───────────────────────────── */
.finale { --sea-top: #061828; --sea-mid: #04121F; --sea-bottom: #030D1A; padding: clamp(4rem, 9vw, 8rem) 0 clamp(5rem, 10vw, 9rem); color: #F3F7FA; text-align: center; }
.finale__in { display: grid; justify-items: center; gap: 1.3rem; }
.finale__shell { position: relative; width: clamp(170px, 24vw, 260px); }
.finale__btn { display: block; width: 100%; border-radius: 50%; }
.finale__glow { position: absolute; left: 50%; top: 50%; width: 260%; aspect-ratio: 1; margin: -130% 0 0 -130%; border-radius: 50%; background: radial-gradient(closest-side, rgba(229, 197, 104, .2), transparent 70%); pointer-events: none; }
.finale__h { font-size: clamp(2.5rem, 1.2rem + 5.4vw, 5.4rem); max-width: 14ch; letter-spacing: -.035em; }
.finale__p { max-width: 46ch; font-size: var(--fs-xl); color: #B4C8D6; }
.finale__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .5rem; }
.finale__note { font-size: var(--fs-sm); color: var(--text-mute); }
@media (max-width: 520px) { .finale__cta { display: grid; width: 100%; } .finale__cta .btn { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .unlock__cap { opacity: 1; transform: none; }
}