/* طريق العقول — home page.
   Base rules give a plain, readable page. Everything scroll-driven lives under `.fx`, which the <head> script adds
   only when JS runs and the visitor has not asked for reduced motion. Transforms and opacity only, so it stays at 60fps. */

.home {
  --ink: #0a1433;
  --ink-2: #0c1a42;
  --gold-1: #ffd66b;
  --gold-2: #ff9a4d;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --nav-h: 58px;
  background: var(--ink);
}

/* header turns dark while it sits over a night scene */
.nav { transition: background .4s, border-color .4s; }
.nav .brand b, .nav .nav-links a { transition: color .4s; }
.nav.dark { background: rgba(6, 12, 36, .66); border-bottom-color: rgba(255, 255, 255, .08); }
.nav.dark .brand, .nav.dark .nav-links a { color: #fff; }
.nav.dark .nav-links a:hover { background: rgba(255, 255, 255, .1); }

.btn-ghost { --c: rgba(255, 255, 255, .6); --cd: rgba(28, 42, 77, .18); color: var(--navy); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ================= STORY ================= */
.story { position: relative; }
.stage { position: relative; overflow: hidden; isolation: isolate; padding: 40px 0 clamp(110px, 16vw, 190px); }

.sky, .sky > div { position: absolute; inset: 0; pointer-events: none; }
.sky { z-index: -1; overflow: hidden; }
.sky-day { background: linear-gradient(#5aa6f5 0%, #8cc5fa 45%, #cfe8ff 100%); }
.sky-night { opacity: 0; background: linear-gradient(#040a20 0%, #0a1433 62%, #0c1a42 100%); }
.stars { opacity: 0; }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .25; } }
.spot { opacity: 0; background: radial-gradient(52% 46% at 50% 54%, rgba(98, 160, 255, .32), transparent 70%); }

.clouds { will-change: transform, opacity; }
.cloud { position: absolute; animation: drift linear infinite; will-change: transform; }
.cloud.c1 { top: 9%;  width: 220px; left: 100%; animation-duration: 95s; animation-delay: -20s; opacity: .95; }
.cloud.c2 { top: 30%; width: 160px; left: 100%; animation-duration: 120s; animation-delay: -70s; opacity: .85; }
.cloud.c3 { top: 58%; width: 300px; left: 100%; animation-duration: 80s;  animation-delay: -45s; }
.cloud.c4 { top: 18%; width: 130px; left: 100%; animation-duration: 150s; animation-delay: -110s; opacity: .7; }
.cloud.c5 { top: 46%; width: 190px; left: 100%; animation-duration: 105s; animation-delay: -5s; opacity: .8; }
/* drift right-to-left, the reading direction */
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-100vw - 340px), 0, 0); } }

.ground { position: absolute; inset-inline: 0; bottom: 0; height: clamp(90px, 13vw, 160px); z-index: 1; pointer-events: none; will-change: transform; }
.ground .hill { position: absolute; bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.ground .hb1 { inset-inline-start: -14%; width: 70%; height: 78%; background: #80c76b; }
.ground .hb2 { inset-inline-end: -18%; width: 78%; height: 66%; background: #80c76b; }
.ground .hf { inset-inline: -6%; height: 44%; background: #a8e075; }
.ground .tree { position: absolute; width: clamp(24px, 3.6vw, 48px); }
.ground .tree.back { width: clamp(16px, 2.4vw, 30px); }
.ground-night { position: absolute; inset: 0; background: #050b22; opacity: 0; }

.intro { position: relative; z-index: 4; text-align: center; padding: 0 var(--gutter); }
.intro-icon { width: 84px; height: 84px; border-radius: 20px; margin: 0 auto 8px; box-shadow: 0 14px 30px rgba(28, 42, 77, .3), 0 0 0 3px #fff; }
.intro h1 { font-family: var(--title); font-weight: 400; font-size: clamp(3.4rem, 11vw, 7.2rem); line-height: 1.1; color: var(--navy); text-shadow: 0 4px 0 rgba(255, 255, 255, .7); }
.intro-tag { font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 800; color: var(--navy); margin: 4px 0 20px; }
.intro-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.statement { display: none; }

.rig { position: relative; width: min(88vw, 760px); margin: 40px auto 0; z-index: 3; transform-style: preserve-3d; }
.tv { position: relative; border: clamp(6px, .9vw, 11px) solid #0e1426; border-radius: clamp(10px, 1.4vw, 18px); background: #0e1426;
  box-shadow: 0 40px 80px -20px rgba(4, 10, 32, .55), 0 0 0 1px rgba(255, 255, 255, .06); transition: box-shadow .6s; }
.tv::after { content: ""; position: absolute; top: 100%; left: 50%; translate: -50% 0; width: 24%; height: clamp(8px, 1.4vw, 16px); background: linear-gradient(#26345c, #0e1426); border-radius: 0 0 10px 10px; }
.tv-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: #8cc5fa; }
.phone-screen { position: relative; aspect-ratio: 600 / 1304; overflow: hidden; border-radius: 13% / 6%; background: #8cc5fa; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.035); transition: opacity .6s var(--ease), transform .9s var(--ease); }
.shot.on { opacity: 1; transform: none; }
.glare { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%); transform: translateX(-100%); pointer-events: none; }
.rig.pulse .glare { animation: glare 1s var(--ease); }
@keyframes glare { to { transform: translateX(100%); } }
.rig.pulse .tv { box-shadow: 0 40px 80px -20px rgba(4, 10, 32, .55), 0 0 60px 6px rgba(120, 180, 255, .45); }

.phone { position: absolute; left: -6%; bottom: -18%; width: 25%; border: clamp(3px, .5vw, 6px) solid #0e1426; border-radius: 15% / 7%; background: #0e1426;
  box-shadow: 0 30px 50px -12px rgba(4, 10, 32, .6), 0 0 0 1px rgba(255, 255, 255, .08); z-index: 2; will-change: transform; }
.ripple { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(140, 197, 250, .9); translate: -50% -50%; opacity: 0; pointer-events: none; }
.rig.pulse .ripple { animation: ripple 1.1s var(--ease); }
.rig.pulse .ripple.r2 { animation-delay: .18s; }
@keyframes ripple { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(2.6); } }

.panel { position: relative; z-index: 4; width: min(100% - 2 * var(--gutter), 900px); margin: clamp(60px, 9vw, 110px) auto 0; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.chap { background: #fff; border-radius: 22px; padding: 18px; }
.chap small { display: block; font-weight: 800; color: var(--steel); letter-spacing: .02em; margin-bottom: 4px; }
.chap h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: 6px; }
.chap p { margin: 0; color: #33456b; line-height: 1.6; }
.progress, .scroll-hint { display: none; }
.solo { text-align: center; font-weight: 800; margin: 16px 0 0; color: var(--navy); }
.solo .ic { margin-inline-end: .45em; font-size: 1.15em; }

/* ================= STATEMENT ================= */
.words { background: linear-gradient(var(--ink-2), var(--ink)); padding: clamp(90px, 20vh, 200px) 0; }
.lit { width: min(100% - 2 * var(--gutter), 980px); margin: 0 auto; color: #fff; font-size: clamp(1.9rem, 4.6vw, 3.6rem); font-weight: 800; line-height: 1.5; text-align: center; }
.lit b { background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lit .w { transition: opacity .25s linear; }

/* ================= PACKS ================= */
.packs { background: var(--ink); color: #fff; padding: 20px 0 90px; }
.packs-head { text-align: center; padding: 0 var(--gutter); }
.packs-head h2 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; }
.packs-head p { color: #aebedf; font-size: 1.1rem; margin-top: 8px; }
.packs-track { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; padding: 40px var(--gutter) 0; }
.pk { --c1: #7cc7ff; --c2: #2a74d8; flex: none; width: clamp(210px, 21vw, 264px); aspect-ratio: 4 / 5; border-radius: 32px; padding: 26px 24px 24px;
  position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; color: #fff; will-change: transform, opacity;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 70px -40px rgba(0, 0, 0, .8); }
/* a soft pool of the pack's colour behind the icon */
.pk::before { content: ""; position: absolute; z-index: -1; width: 150%; aspect-ratio: 1; left: -25%; top: -62%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--c2), transparent); opacity: .38; filter: blur(6px); }
.pk-icon { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(145deg, var(--c1), var(--c2));
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5), inset 0 -2px 6px rgba(0, 0, 0, .15), 0 14px 30px -8px var(--c2); }
.pk-icon .ic { font-size: 2.3rem; color: #fff; stroke-width: 1.7; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.pk.mine .pk-icon .ic { color: #dfe7fb; }
.pk h3 { font-size: clamp(1.35rem, 1.9vw, 1.6rem); font-weight: 800; margin-top: auto; line-height: 1.3; }
.pk-meta { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.pk-meta b { font-size: 2rem; font-weight: 800; line-height: 1; background: linear-gradient(180deg, #fff, var(--c1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pk-meta span { color: #9fb0d4; font-weight: 700; font-size: .95rem; }
.lvl { margin-inline-start: auto; font-style: normal; font-size: .78rem; font-weight: 800; padding: .25em .75em; border-radius: 999px; align-self: center; }
.lvl.easy { color: #7ee08a; background: rgba(126, 224, 138, .12); box-shadow: inset 0 0 0 1px rgba(126, 224, 138, .25); }
.lvl.mid { color: #ffc76b; background: rgba(255, 199, 107, .12); box-shadow: inset 0 0 0 1px rgba(255, 199, 107, .25); }
.pk.mine { background: transparent; box-shadow: none; border: 1.5px dashed rgba(255, 255, 255, .28); }
.pk.mine::before { background: conic-gradient(from 90deg, #5ac8fa, #b69cff, #ff9ec4, #ffc76b, #7ee08a, #5ac8fa); opacity: .16; filter: blur(30px); }
.pk.mine .pk-icon { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.pk.mine p { color: #9fb0d4; margin: 8px 0 0; line-height: 1.55; font-weight: 600; }

/* ================= FEATURES ================= */
.features { background: var(--ink); }
.sheet { background: #f4f7fc; border-radius: 44px 44px 0 0; padding: clamp(60px, 9vw, 110px) 0 clamp(60px, 8vw, 100px); transform-origin: 50% 0; will-change: transform; }
.f-title { text-align: center; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; max-width: 21ch; margin: 0 auto clamp(30px, 5vw, 56px); text-wrap: balance; }

.bento { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); grid-template-areas: "life life players" "ai new privacy" "ai solo solo"; }
.t-life { grid-area: life; } .t-players { grid-area: players; } .t-ai { grid-area: ai; } .t-new { grid-area: new; } .t-privacy { grid-area: privacy; } .t-solo { grid-area: solo; }
@media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "life life" "players new" "ai privacy" "solo solo"; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; grid-template-areas: "life" "players" "new" "ai" "privacy" "solo"; } }

.tile { position: relative; overflow: hidden; background: #fff; border-radius: 30px; padding: clamp(22px, 3vw, 32px); box-shadow: 0 1px 0 rgba(28, 42, 77, .04), 0 20px 50px -30px rgba(28, 42, 77, .35);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .4s; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(90, 166, 245, .14), transparent 60%); }
.tile:hover::before { opacity: 1; }
.tile h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 800; margin-bottom: 6px; }
.tile p { color: var(--steel); margin: 0; line-height: 1.6; }

.t-life { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: linear-gradient(135deg, #eaf4ff, #fff 70%); }
.life-demo { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ring { position: relative; width: 116px; height: 116px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px -10px rgba(28, 42, 77, .3); }
.ring > svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.4; }
.ring .bg { stroke: #e3ecf8; }
.ring .fg { stroke: #2fc26b; stroke-linecap: round; stroke-dasharray: 119.4; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke .3s; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--title); font-weight: 400; font-size: 2.6rem; }
.ring b .ic { font-size: 2.4rem; color: #58b7ff; stroke-width: 2; }
.t-life.frozen .ring .fg { stroke: #58b7ff; }
.t-life.low .ring .fg { stroke: #e5484d; }
.pills { display: flex; gap: 8px; }
.pills span { display: inline-flex; align-items: center; gap: .35em; background: #fff; border-radius: 999px; padding: .3em .9em; font-weight: 800; font-size: .9rem; box-shadow: 0 4px 12px rgba(28, 42, 77, .12); transition: transform .3s var(--ease), background .3s, color .3s; }
.t-life.frozen .p-freeze { background: #58b7ff; color: #fff; transform: translateY(-4px) scale(1.06); }

.avs { display: flex; margin-top: 22px; padding-inline-start: 24px; }
.avs img { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; margin-inline-start: -24px; box-shadow: 0 6px 14px rgba(28, 42, 77, .18); transition: margin .7s var(--ease), transform .7s var(--ease); }
.t-players.in .avs img { margin-inline-start: -12px; }
.t-players:hover .avs img { transform: translateY(-6px); }
.t-players .avs img:nth-child(2) { transition-delay: .05s; } .t-players .avs img:nth-child(3) { transition-delay: .1s; } .t-players .avs img:nth-child(4) { transition-delay: .15s; }
.t-players .avs img:nth-child(5) { transition-delay: .2s; } .t-players .avs img:nth-child(6) { transition-delay: .25s; } .t-players .avs img:nth-child(7) { transition-delay: .3s; } .t-players .avs img:nth-child(8) { transition-delay: .35s; }

.mini-phone { width: min(62%, 220px); margin: 26px auto -40%; border: 6px solid #0e1426; border-radius: 30px; overflow: hidden; background: #0e1426; box-shadow: 0 30px 50px -20px rgba(28, 42, 77, .5);
  transform: translateY(24%); transition: transform 1s var(--ease); }
.mini-phone img { width: 100%; border-radius: 24px; }
.tile.in .mini-phone { transform: none; }
.t-ai { background: linear-gradient(180deg, #fff, #fff4e6); }

.t-new { background: linear-gradient(180deg, #fff, #f3edff); }
.deck { position: relative; height: 120px; margin-top: 22px; }
.deck span { position: absolute; inset-inline: 0; top: 0; margin: auto; width: 88%; background: #fff; border-radius: 18px; padding: 16px; font-weight: 800; text-align: center;
  box-shadow: 0 10px 24px -10px rgba(28, 42, 77, .35); animation: deal 9s var(--ease) infinite; }
.deck span:nth-child(1) { animation-delay: 0s; } .deck span:nth-child(2) { animation-delay: -3s; } .deck span:nth-child(3) { animation-delay: -6s; }
@keyframes deal {
  0%    { transform: translateY(0) scale(1); opacity: 1; z-index: 3; }
  30%   { transform: translateY(0) scale(1); opacity: 1; z-index: 3; }
  36%   { transform: translate(-40%, -30px) rotate(-10deg); opacity: 0; z-index: 3; }
  37%   { transform: translateY(36px) scale(.86); opacity: 0; z-index: 1; }
  45%   { transform: translateY(36px) scale(.86); opacity: .6; z-index: 1; }
  70%   { transform: translateY(18px) scale(.93); opacity: .85; z-index: 2; }
  100%  { transform: translateY(0) scale(1); opacity: 1; z-index: 3; }
}

.t-privacy { background: var(--navy); color: #fff; }
.t-privacy p { color: #c3d1ee; }
.t-privacy a { display: inline-block; margin-top: 14px; color: var(--gold-1); }
.lock { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 14px; color: var(--gold-1); background: rgba(255, 214, 107, .12); box-shadow: inset 0 0 0 1px rgba(255, 214, 107, .28); }
.lock .ic { font-size: 1.8rem; }
.t-privacy.in .lock { animation: lock 1.2s var(--ease) .3s both; }
@keyframes lock { 0% { transform: scale(.6) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: none; } }

.t-solo { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; background: linear-gradient(135deg, #fff, #e9f8ee); }
.t-solo .mini-phone { width: 170px; margin: 0 0 -38% 10px; }
.t-solo .mini-phone.tilt { transform: translateY(20%) rotate(-10deg); }
.t-solo.in .mini-phone.tilt { transform: rotate(-6deg); }
@media (max-width: 620px) { .t-life, .t-solo { grid-template-columns: 1fr; } .t-solo .mini-phone { margin: 10px auto -40%; } }

/* ================= FINALE ================= */
.finale { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(#5aa6f5, #8cc5fa 60%, #cfe8ff); padding: clamp(70px, 12vw, 130px) 0 clamp(150px, 20vw, 230px); text-align: center; }
.finale .sky { background: none; }
.finale-inner { position: relative; z-index: 2; }
.finale-icon { width: 120px; height: 120px; border-radius: 28px; margin: 0 auto 18px; box-shadow: 0 24px 50px -10px rgba(28, 42, 77, .45), 0 0 0 4px #fff; animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-2deg); } }
.finale h2 { font-family: var(--title); font-weight: 400; font-size: clamp(2.6rem, 7.5vw, 5.2rem); color: var(--navy); text-shadow: 0 4px 0 rgba(255, 255, 255, .7); }
.finale p { font-size: clamp(1.1rem, 2.4vw, 1.4rem); font-weight: 800; color: var(--navy); margin: 8px 0 26px; }
.finale-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.finale .fine-print { font-size: .95rem; font-weight: 700; color: #33456b; margin: 18px 0 0; }
.finale p .app-name { font-size: 1.3em; }
.confetti { position: fixed; z-index: 100; width: 10px; height: 14px; border-radius: 2px; pointer-events: none; }

/* =====================================================================
   .fx — the scroll-driven version
   ===================================================================== */
.fx .story { height: 680vh; }
.fx .stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; }
.fx .intro { position: absolute; inset-inline: 0; top: calc(var(--nav-h) + 4.5svh); will-change: transform, opacity; }
.fx .intro-icon, .fx .intro h1, .fx .intro-tag, .fx .intro-cta { animation: rise 1.1s var(--ease) both; }
.fx .intro h1 { animation-delay: .08s; } .fx .intro-tag { animation-delay: .18s; } .fx .intro-cta { animation-delay: .28s; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); filter: blur(10px); } }

.fx .statement { display: block; position: absolute; inset-inline: 0; top: calc(var(--nav-h) + 5svh); z-index: 4; margin: 0; padding: 0 var(--gutter); text-align: center; color: #fff;
  font-size: clamp(2rem, 4.6vw, 3.8rem); font-weight: 800; line-height: 1.25; opacity: 0; will-change: transform, opacity; }
.fx .statement span, .fx .statement em { display: block; font-style: normal; }
.fx .statement em { background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.fx .rig { will-change: transform; }
.fx .rig { position: absolute; left: 50%; top: 50%; margin: 0; width: var(--tvw); translate: -50% -42%; }
.fx .stage { --tvw: min(60vw, 900px, calc((100svh - 190px) * 1.55)); perspective: 1800px; }
.fx .phone { will-change: transform; }

.fx .panel { position: absolute; margin: 0; z-index: 5; right: max(5vw, var(--gutter)); top: 50%; width: min(33vw, 430px); translate: 0 -40%; opacity: 0; pointer-events: none; }
.fx .panel.live { pointer-events: auto; }
.fx .chapters { display: grid; grid-template-columns: 1fr; }
.fx .chap { grid-area: 1 / 1; background: none; padding: 0; color: #fff; opacity: 0; transform: translateY(24px); filter: blur(8px);
  transition: opacity .6s var(--ease), transform .8s var(--ease), filter .6s var(--ease); }
.fx .chap.on { opacity: 1; transform: none; filter: none; transition-delay: .12s; }
.fx .chap small { color: var(--gold-1); font-size: .95rem; }
.fx .chap h2 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.2; margin-bottom: 12px; }
.fx .chap p { color: #c9d6f1; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.75; }
.fx .progress { display: flex; gap: 6px; margin-top: 26px; }
.fx .progress i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.fx .progress b { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-2), var(--gold-1)); transform-origin: right; transform: scaleX(0); }
.fx .solo { text-align: start; color: #aebedf; font-size: .95rem; margin-top: 16px; font-weight: 700; }

.fx .scroll-hint { display: block; position: absolute; left: 50%; translate: -50% 0; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 6; width: 26px; height: 40px; border-radius: 14px; border: 2px solid rgba(28, 42, 77, .55); }
.fx .scroll-hint span { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--navy); animation: wheel 1.6s ease-in-out infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

@media (max-width: 899px) {
  .fx .story { height: 620vh; }
  .intro-cta .btn-lg { font-size: 1.02rem; padding: .6em 1.1em; }
  .fx .stage { --tvw: min(90vw, calc((100svh - 330px) * 1.5)); }
  .fx .rig { translate: -50% -30%; }
  .fx .phone { width: 30%; left: -3%; bottom: -24%; }
  .fx .panel { right: var(--gutter); left: var(--gutter); width: auto; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); translate: none;
    background: rgba(8, 16, 46, .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; padding: 18px 18px 14px; }
  .fx .chap h2 { font-size: 1.55rem; margin-bottom: 6px; }
  .fx .chap p { font-size: 1rem; line-height: 1.6; }
  .fx .progress { margin-top: 14px; }
  .fx .solo { display: none; }
  .pk { width: 64vw; }
}

/* statement: words start dim and light up with scroll */
.fx .lit .w { opacity: .16; }

/* packs: pinned stage, the row slides sideways */
.fx .packs { padding: 0; }
.fx .packs-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 4svh; }
.fx .packs-head { padding-top: var(--nav-h); }
.fx .packs-track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 0 var(--gutter); will-change: transform; }

/* reveal tiles on scroll */
.fx .reveal { opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.fx .reveal.in { opacity: 1; transform: none; }
.fx .bento .reveal:nth-child(2) { transition-delay: .08s; } .fx .bento .reveal:nth-child(3) { transition-delay: .12s; }
.fx .bento .reveal:nth-child(4) { transition-delay: .16s; } .fx .bento .reveal:nth-child(5) { transition-delay: .2s; } .fx .bento .reveal:nth-child(6) { transition-delay: .24s; }