/* ==========================================================================
   NEXBOOK — premium-scenes.css · illustrated section scenes
   (comic strip, world map, exchange loop, trophy hall, NeX pass, Synapse classroom,
    Free Resources upgrades, footer lamp). Presentation only.
   ========================================================================== */
.nbs-ink { stroke: #111110; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nbs-draw path, .nbs-draw circle, .nbs-draw rect, .nbs-draw ellipse, .nbs-draw line { stroke-dasharray: 700; stroke-dashoffset: 700; }
.nbs-draw.is-in path, .nbs-draw.is-in circle, .nbs-draw.is-in rect, .nbs-draw.is-in ellipse, .nbs-draw.is-in line { animation: nbsDraw 1.8s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes nbsDraw { to { stroke-dashoffset: 0; } }
.nbs-hand { font: 600 1.2rem/1.1 'Caveat', cursive; color: rgba(17,17,16,0.7); }

/* ---------- 1. How it works → comic strip ---------- */
.nb-comic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 10px 0 18px; padding: 22px; background: #fbfbfa; border: 1.5px solid #111110; border-radius: 6px; box-shadow: 6px 6px 0 #111110; position: relative; }
.nb-comic::before { content: "HOW IT WORKS · A THREE-PANEL STORY"; position: absolute; top: -12px; left: 20px; padding: 3px 10px; background: #f5c542; font: 800 0.6rem/1.2 Inter, system-ui; letter-spacing: 0.18em; border: 1.5px solid #111110; transform: rotate(-1.5deg); }
.nb-panel { position: relative; background: #fff; border: 1.5px solid #111110; border-radius: 4px; padding: 14px 14px 16px; transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s; overflow: hidden; }
.nb-panel:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: 0 22px 40px -22px rgba(0,0,0,0.45), 4px 4px 0 #111110; z-index: 2; }
.nb-panel .no { position: absolute; top: -6px; left: -6px; width: 38px; height: 38px; border-radius: 50%; background: #111110; color: #fff; display: grid; place-items: center; font: italic 800 1rem/1 'Playfair Display', Georgia, serif; border: 2px solid #fff; box-shadow: 0 0 0 1.5px #111110; transform: rotate(-8deg); }
.nb-panel svg { width: 100%; height: 150px; display: block; overflow: visible; }
.nb-panel h4 { margin: 12px 0 4px; font: 800 1.05rem/1.2 'Playfair Display', Georgia, serif; }
.nb-panel p { margin: 0; font: 500 0.82rem/1.45 Inter, system-ui; color: rgba(17,17,16,0.65); }
.nb-panel .bubble { position: absolute; top: 16px; right: 14px; padding: 6px 10px; background: #fff; border: 1.5px solid #111110; border-radius: 14px 14px 14px 2px; font: 600 0.92rem/1 'Caveat', cursive; transform: scale(0); transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.9s; }
.nb-panel.is-in .bubble { transform: scale(1); }
.nb-panel .flash { transform-box: fill-box; transform-origin: center; opacity: 0; } .nb-panel.is-in .flash { animation: nbsFlash 3s ease-in-out 1.2s infinite; }
@keyframes nbsFlash { 0%,10% { opacity: 0; transform: scale(0.6); } 14% { opacity: 1; transform: scale(1.3); } 22%,100% { opacity: 0; transform: scale(1); } }
.nb-panel .tagp { transform-box: fill-box; transform-origin: top left; opacity: 0; } .nb-panel.is-in .tagp { animation: nbsTag 3s cubic-bezier(0.34,1.56,0.64,1) 1.5s infinite; }
@keyframes nbsTag { 0%,20% { opacity: 0; transform: rotate(-20deg) translateY(-10px); } 30% { opacity: 1; transform: rotate(6deg); } 40%,85% { opacity: 1; transform: rotate(0); } 100% { opacity: 0; } }
.nb-panel .arm2 { transform-box: fill-box; transform-origin: top left; } .nb-panel.is-in .arm2 { animation: nbiGive 3.6s ease-in-out 1s infinite; }
.nb-panel .bk { offset-path: path('M96 74 C 110 56, 126 56, 140 72'); offset-rotate: auto; opacity: 0; } .nb-panel.is-in .bk { animation: nbsHand 3.6s cubic-bezier(0.45,0,0.3,1) 1s infinite; }
@keyframes nbsHand { 0%,28% { opacity: 1; offset-distance: 0%; } 55%,70% { opacity: 1; offset-distance: 100%; } 76%,100% { opacity: 0; offset-distance: 0%; } }
.nb-panel .cash { transform-box: fill-box; transform-origin: center; } .nb-panel.is-in .cash { animation: nbsCash 3s ease-in-out 0.8s infinite; }
@keyframes nbsCash { 0%,15% { transform: translateY(0); } 35%,60% { transform: translate(26px, -6px) rotate(-8deg); } 80%,100% { transform: translateY(0); } }
.nb-panel .done { transform-box: fill-box; transform-origin: center; opacity: 0; } .nb-panel.is-in .done { animation: nbsStampIn 3s cubic-bezier(0.34,1.56,0.64,1) 0.8s infinite; }
@keyframes nbsStampIn { 0%,55% { opacity: 0; transform: scale(2.2) rotate(-14deg); } 64%,90% { opacity: 1; transform: scale(1) rotate(-12deg); } 100% { opacity: 0; } }
#how-it-works-steps-wrapper.nb-hidden, #how-it-works .nb-hide-toggle { display: none !important; }
@media (max-width: 767px) { .nb-comic { grid-template-columns: 1fr; padding: 18px 14px; } }

/* ---------- 2. AcademyX world map ---------- */
.nb-worldmap { position: relative; max-width: 980px; margin: 0 auto 28px; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto auto; align-items: center; gap: 18px; }
.nb-worldmap > .col.l { grid-column: 1; grid-row: 1; } .nb-worldmap > .nb-globe { grid-column: 2; grid-row: 1; } .nb-worldmap > .col.r { grid-column: 3; grid-row: 1; } .nb-worldmap > .nb-globe-legend { grid-column: 1 / -1; grid-row: 2; margin: -6px 0 0; } .nb-worldmap > .cert { grid-row: 3; }
.nb-worldmap .nb-globe { margin: 0; justify-self: center; }
.nb-worldmap .col { display: flex; flex-direction: column; gap: 14px; }
.nb-ucard { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #fff; border: 1px solid rgba(17,17,16,0.1); border-radius: 16px; box-shadow: 0 14px 30px -18px rgba(0,0,0,0.3); text-decoration: none; color: #111110; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s; opacity: 0; transform: translateY(14px); }
.nb-worldmap.is-in .nb-ucard { opacity: 1; transform: none; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1) var(--d, 0s), opacity 0.6s var(--d, 0s); }
.nb-ucard:hover { transform: translateY(-3px) !important; box-shadow: 0 22px 40px -18px rgba(0,0,0,0.4); }
.nb-ucard img { width: 56px; height: 44px; object-fit: cover; border-radius: 10px; }
.nb-ucard b { display: block; font: 700 0.9rem/1.15 'Playfair Display', Georgia, serif; } .nb-ucard small { font: 600 0.66rem/1 Inter, system-ui; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(17,17,16,0.55); }
.nb-ucard i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.18); top: 50%; transform: translateY(-50%); }
.col.l .nb-ucard i { right: -4px; } .col.r .nb-ucard i { left: -4px; }
.nb-worldmap .links { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.nb-worldmap .links path { stroke: #2563eb; stroke-width: 1.4; fill: none; stroke-dasharray: 5 6; opacity: 0.55; animation: nbDash 2.2s linear infinite; }
.nb-worldmap .cert { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; font: 600 0.9rem/1.3 Inter, system-ui; color: rgba(17,17,16,0.7); }
.nb-worldmap .cert b { font: 800 1.6rem/1 'Playfair Display', Georgia, serif; color: #111110; }
.nb-worldmap .cert .nb-cert { width: 60px; height: 44px; } .nb-worldmap .cert .nb-cert .paper { transform: scaleX(1); } .nb-worldmap .cert .nb-cert .lines { opacity: 1; }
.nb-worldmap .cert svg * { stroke: #111110; } .nb-worldmap .cert svg rect[fill] { fill: #fff; }
@media (max-width: 860px) { .nb-worldmap { grid-template-columns: 1fr; } .nb-worldmap .col { flex-direction: row; overflow-x: auto; scrollbar-width: none; } .nb-ucard { flex: 0 0 220px; } .nb-ucard i, .nb-worldmap .links { display: none; } }

/* ---------- 3. Community exchange map ---------- */
.nb-map.nb-map-x { margin-top: 18px; }
.nb-map-x .pinx { transform-box: fill-box; transform-origin: center bottom; animation: nbPin 2.4s ease-in-out infinite; transition: transform 0.3s, filter 0.3s; cursor: pointer; }
.nb-map-x .pinx:nth-of-type(2) { animation-delay: -0.8s; } .nb-map-x .pinx:nth-of-type(3) { animation-delay: -1.6s; }
.nb-map-x .pinx .lb { font: 700 9px/1 Inter, system-ui; letter-spacing: 1.5px; fill: #111110; text-transform: uppercase; }
.nb-map-x.hl-grab .pinx.grab, .nb-map-x.hl-give .pinx.give, .nb-map-x.hl-swap .pinx.swap { transform: scale(1.25); filter: drop-shadow(0 6px 10px rgba(37,99,235,0.5)); animation: none; }
.nb-map-x.hl-grab .pinx:not(.grab), .nb-map-x.hl-give .pinx:not(.give), .nb-map-x.hl-swap .pinx:not(.swap) { opacity: 0.35; }
.nb-map-x .walk { animation: nbsWalkMap 12s linear infinite; } @keyframes nbsWalkMap { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.nb-map-x .walk { offset-path: path('M120 70 C 160 160, 280 160, 300 90 S 440 90, 500 150'); offset-rotate: 0deg; }

/* ---------- 4. Exchange story loop (Claim your free book) ---------- */
.nb-xchg { position: relative; width: 100%; aspect-ratio: 560 / 250; min-height: 0; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #eaf3ff, #fbfbfa 60%); border: 1px solid rgba(17,17,16,0.1); }
.nb-xchg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nb-xchg .steps { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; gap: 6px; justify-content: center; z-index: 2; }
.nb-xchg .steps span { font: 700 0.6rem/1 Inter, system-ui; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,0.85); border: 1px solid rgba(17,17,16,0.12); color: rgba(17,17,16,0.5); transition: background 0.3s, color 0.3s; }
.nb-xchg .steps span.on { background: #111110; color: #fff; }
.nb-xchg .stamp2 { transform-box: fill-box; transform-origin: center; opacity: 0; }
/* 10s loop timeline */
.nb-xchg .phoneA .chk { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: nbxChk 10s cubic-bezier(0.34,1.56,0.64,1) infinite; }
@keyframes nbxChk { 0%,8% { transform: scale(0); } 12%,30% { transform: scale(1); } 32%,100% { transform: scale(0); } }
.nb-xchg .armTap { transform-box: fill-box; transform-origin: top left; animation: nbxTap 10s ease-in-out infinite; }
@keyframes nbxTap { 0%,6% { transform: rotate(0); } 9% { transform: rotate(-14deg); } 12% { transform: rotate(0); } 100% { transform: rotate(0); } }
.nb-xchg .notif { offset-path: path('M150 120 C 220 40, 340 40, 430 120'); offset-rotate: 0deg; opacity: 0; animation: nbxNotif 10s cubic-bezier(0.45,0,0.3,1) infinite; }
@keyframes nbxNotif { 0%,12% { opacity: 0; offset-distance: 0%; } 14% { opacity: 1; } 26% { opacity: 1; offset-distance: 100%; } 28%,100% { opacity: 0; offset-distance: 100%; } }
.nb-xchg .phoneB { transform-box: fill-box; transform-origin: center; animation: nbxBuzz 10s linear infinite; }
@keyframes nbxBuzz { 0%,26% { transform: none; } 27% { transform: translateX(-2px) rotate(-3deg); } 28% { transform: translateX(2px) rotate(3deg); } 29% { transform: translateX(-2px); } 30% { transform: translateX(2px); } 31%,100% { transform: none; } }
.nb-xchg .bell { transform-box: fill-box; transform-origin: top center; opacity: 0; animation: nbxBell 10s ease-in-out infinite; }
@keyframes nbxBell { 0%,25% { opacity: 0; } 27% { opacity: 1; transform: rotate(-18deg); } 29% { transform: rotate(18deg); } 31% { transform: rotate(-10deg); } 33% { transform: rotate(0); } 40%,100% { opacity: 0; } }
.nb-xchg .studentB { animation: nbxWalk 10s cubic-bezier(0.4,0,0.3,1) infinite; }
@keyframes nbxWalk { 0%,33% { transform: translateX(0); } 50%,100% { transform: translateX(-118px); } }
.nb-xchg .studentB .lg1, .nb-xchg .studentB .lg2 { transform-box: fill-box; transform-origin: top center; animation: nbxLeg 10s ease-in-out infinite; }
.nb-xchg .studentB .lg2 { animation-name: nbxLeg2; }
@keyframes nbxLeg { 0%,33% { transform: rotate(0); } 35% { transform: rotate(-20deg); } 38% { transform: rotate(20deg); } 41% { transform: rotate(-20deg); } 44% { transform: rotate(20deg); } 47% { transform: rotate(-20deg); } 50%,100% { transform: rotate(0); } }
@keyframes nbxLeg2 { 0%,33% { transform: rotate(0); } 35% { transform: rotate(20deg); } 38% { transform: rotate(-20deg); } 41% { transform: rotate(20deg); } 44% { transform: rotate(-20deg); } 47% { transform: rotate(20deg); } 50%,100% { transform: rotate(0); } }
.nb-xchg .armB { transform-box: fill-box; transform-origin: top right; animation: nbxArmB 10s ease-in-out infinite; }
@keyframes nbxArmB { 0%,50% { transform: rotate(0); } 56%,70% { transform: rotate(36deg); } 76%,100% { transform: rotate(0); } }
.nb-xchg .armA2 { transform-box: fill-box; transform-origin: top left; animation: nbxArmA 10s ease-in-out infinite; }
@keyframes nbxArmA { 0%,52% { transform: rotate(0); } 58%,72% { transform: rotate(-34deg); } 78%,100% { transform: rotate(0); } }
.nb-xchg .bookB { animation: nbxBookB 10s step-end infinite; } @keyframes nbxBookB { 0%,55% { opacity: 1; } 56%,100% { opacity: 0; } }
.nb-xchg .bookFly { offset-path: path('M300 118 C 285 100, 255 100, 240 118'); offset-rotate: auto; opacity: 0; animation: nbxFly 10s cubic-bezier(0.45,0,0.3,1) infinite; }
@keyframes nbxFly { 0%,55% { opacity: 0; offset-distance: 0%; } 56% { opacity: 1; } 64% { opacity: 1; offset-distance: 100%; } 65%,100% { opacity: 0; offset-distance: 100%; } }
.nb-xchg .bookA { opacity: 0; animation: nbxBookA 10s step-end infinite; } @keyframes nbxBookA { 0%,64% { opacity: 0; } 65%,80% { opacity: 1; } 81%,100% { opacity: 0; } }
.nb-xchg .bagA .zip { stroke-dasharray: 20; stroke-dashoffset: 20; animation: nbxZip 10s linear infinite; } @keyframes nbxZip { 0%,80% { stroke-dashoffset: 20; } 86%,100% { stroke-dashoffset: 0; } }
.nb-xchg .sparkx { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: nbxSpark 10s cubic-bezier(0.34,1.56,0.64,1) infinite; }
@keyframes nbxSpark { 0%,64% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.2) rotate(12deg); opacity: 1; } 80% { transform: scale(1); opacity: 1; } 88%,100% { transform: scale(0); opacity: 0; } }
.nb-xchg .thanks { opacity: 0; animation: nbxThanks 10s ease-in-out infinite; } @keyframes nbxThanks { 0%,66% { opacity: 0; transform: translateY(6px); } 72%,86% { opacity: 1; transform: none; } 92%,100% { opacity: 0; } }
.nb-xchg .wave { transform-box: fill-box; transform-origin: bottom left; animation: nbxWave 10s ease-in-out infinite; } @keyframes nbxWave { 0%,82% { transform: rotate(0); } 85% { transform: rotate(-30deg); } 88% { transform: rotate(10deg); } 91% { transform: rotate(-30deg); } 94%,100% { transform: rotate(0); } }
.nb-xchg .stamp2 { animation: nbxStamp 10s cubic-bezier(0.34,1.56,0.64,1) infinite; } @keyframes nbxStamp { 0%,84% { opacity: 0; transform: scale(2.2) rotate(-12deg); } 88%,97% { opacity: 1; transform: scale(1) rotate(-12deg); } 100% { opacity: 0; } }
.nb-xchg .cnt { opacity: 0; animation: nbxCnt 10s ease infinite; } @keyframes nbxCnt { 0%,84% { opacity: 0; transform: translateY(4px); } 88%,98% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.nb-xchg.hl-grab .studentA, .nb-xchg.hl-give .studentB { filter: drop-shadow(0 0 10px rgba(37,99,235,0.7)); }
.nb-xchg.hl-swap .bookB, .nb-xchg.hl-swap .bookA2 { filter: drop-shadow(0 0 8px rgba(245,197,66,0.9)); opacity: 1 !important; }
.nb-xchg .cloudx { animation: nbiDrift 36s linear infinite; }
html.nb-no-motion .nb-xchg * { animation: none !important; }

/* ---------- 5. Trophy hall (leaderboard) ---------- */
[id^="top-3-section-NEXBOOK"] { position: relative; }
.nb-hall { position: absolute; left: 50%; top: -70px; width: min(1100px, 100%); height: calc(100% + 120px); transform: translateX(-50%); z-index: 0; pointer-events: none; }
.nb-hall svg { width: 100%; height: 100%; overflow: visible; }
.nb-hall .beam { fill: url(#nbBeam); opacity: 0; animation: nbsBeam 6s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
@keyframes nbsBeam { 0%,100% { opacity: 0.55; transform: rotate(-2deg); } 50% { opacity: 0.85; transform: rotate(2deg); } }
.nb-hall .ban { transform-box: fill-box; transform-origin: top center; animation: nbsBan 4s ease-in-out infinite alternate; } .nb-hall .ban:nth-of-type(2n) { animation-delay: -2s; }
@keyframes nbsBan { to { transform: skewX(3deg); } }
.nb-hall .dust { animation: nbMote var(--d, 9s) ease-in-out var(--s, 0s) infinite; transform-box: fill-box; }
[id^="top-3-section-NEXBOOK"] .grid { position: relative; z-index: 1; }
.nb-wall.nb-wall-frames { background: repeating-linear-gradient(0deg, #ede9df 0 22px, #e4dfd3 22px 23px), #ede9df; padding-bottom: 22px; }
.nb-wall-frames .m { gap: 18px; }
.nb-wall-frames .fr { position: relative; width: 58px; padding: 5px; background: linear-gradient(135deg, #c9a15e, #8a6a34 60%, #d9b877); border-radius: 3px; box-shadow: 0 6px 14px -6px rgba(0,0,0,0.45), inset 0 0 0 2px rgba(255,255,255,0.35); transform: rotate(var(--r, 0deg)); transition: transform 0.3s; }
.nb-wall-frames .fr img { width: 100%; height: 48px; border-radius: 2px; display: block; border: 0 !important; box-shadow: none !important; transform: none !important; }
.nb-wall-frames .fr::before { content: ""; position: absolute; left: 50%; top: -9px; width: 6px; height: 6px; border-radius: 50%; background: #111110; transform: translateX(-50%); }
.nb-wall-frames .fr b { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%) scale(0); padding: 3px 8px; background: #111110; color: #f5e7b3; font: 700 0.56rem/1 Inter, system-ui; letter-spacing: 0.1em; white-space: nowrap; border-radius: 2px; transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.nb-wall-frames .fr:hover { transform: rotate(0) scale(1.15); z-index: 2; } .nb-wall-frames .fr:hover b { transform: translateX(-50%) scale(1); }

/* ---------- 6. Footer lamp ---------- */
.nb-footlamp { position: relative; display: flex; justify-content: center; margin: 0 auto -8px; width: 120px; height: 110px; cursor: pointer; z-index: 2; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.nb-footlamp svg { width: 100%; height: 100%; overflow: visible; }
.nb-footlamp .glow { opacity: 0; transition: opacity 0.5s; } .nb-footlamp.on .glow, .nb-footlamp:hover .glow { opacity: 1; }
.nb-footlamp .bulb { fill: #fff; transition: fill 0.4s; } .nb-footlamp.on .bulb, .nb-footlamp:hover .bulb { fill: #f5c542; }
.nb-footlamp .cord { transform-box: fill-box; transform-origin: top center; } .nb-footlamp:active .cord { animation: nbsPull 0.4s ease; } @keyframes nbsPull { 50% { transform: scaleY(1.25); } }
.nb-footlamp small { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); font: 600 0.95rem/1 'Caveat', cursive; color: rgba(17,17,16,0.55); white-space: nowrap; }

/* ---------- 7. NeX hero → membership pass ---------- */
section.academyx-hero-bg .nb-nex { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; width: min(1040px, 100%); margin: 0 auto 26px; text-align: left; }
.nb-pass { position: relative; aspect-ratio: 1.6; border-radius: 22px; background: linear-gradient(135deg, #17171a, #0b0b0d 55%, #1c1c20); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(245,197,66,0.35); overflow: hidden; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.25s ease-out; transform-style: preserve-3d; }
.nb-pass::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(245,197,66,0.35); border-radius: 16px; pointer-events: none; }
.nb-pass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.12) 50%, transparent 65%); background-size: 250% 100%; background-position: var(--sx, 0%) 0; pointer-events: none; }
.nb-pass .mono { position: absolute; top: 22px; left: 24px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font: 800 1.3rem/1 'Playfair Display', Georgia, serif; color: #111110; background: conic-gradient(from var(--a, 0deg), #ffd6e8, #fff3b0, #c8f7dc, #c4e0ff, #e8ccff, #ffd6e8); box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 6px 14px rgba(0,0,0,0.5); }
.nb-pass .ttl { position: absolute; top: 30px; left: 92px; color: #f5e7b3; font: 800 0.95rem/1 'Playfair Display', Georgia, serif; letter-spacing: 0.22em; }
.nb-pass .ttl small { display: block; margin-top: 6px; font: 600 0.56rem/1 Inter, system-ui; letter-spacing: 0.26em; color: rgba(245,231,179,0.55); }
.nb-pass .stamp { position: absolute; right: 18px; top: 18px; padding: 6px 9px; border: 2px solid #dc2626; color: #dc2626; border-radius: 5px; font: 800 0.52rem/1.1 Inter, system-ui; letter-spacing: 0.16em; text-transform: uppercase; text-align: center; transform: rotate(10deg); opacity: 0.9; }
.nb-pass .net { position: absolute; left: 18px; right: 18px; bottom: 54px; height: 46%; }
.nb-pass .net svg { width: 100%; height: 100%; overflow: visible; }
.nb-pass .net line { stroke: rgba(245,197,66,0.45); stroke-width: 1; stroke-dasharray: 200; stroke-dashoffset: 200; } .nb-pass.is-in .net line { animation: nbsDraw 1.6s ease-out forwards; }
.nb-pass .net circle.n { fill: #f5c542; animation: nbsPulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .nb-pass .net circle.n:nth-of-type(2n) { animation-delay: -1.2s; }
@keyframes nbsPulse { 50% { transform: scale(1.5); opacity: 0.6; } }
.nb-pass .net image { clip-path: circle(50%); }
.nb-pass .foot { position: absolute; left: 24px; right: 24px; bottom: 18px; display: flex; justify-content: space-between; align-items: flex-end; color: rgba(255,255,255,0.7); font: 600 0.62rem/1 Inter, system-ui; letter-spacing: 0.14em; text-transform: uppercase; }
.nb-pass .foot b { display: block; color: #fff; font: 800 0.95rem/1 'Playfair Display', Georgia, serif; letter-spacing: 0.04em; text-transform: none; margin-top: 4px; }
.nb-pass .bar { width: 90px; height: 26px; border-radius: 3px; background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 5px, #fff 5px 6px, transparent 6px 10px); opacity: 0.8; }
.nb-phone { position: relative; justify-self: center; width: 200px; aspect-ratio: 0.5; border-radius: 30px; background: #0d0d0f; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.8), inset 0 0 0 2px #2a2a2e, 0 0 0 1px rgba(255,255,255,0.08); padding: 14px 10px; overflow: hidden; }
.nb-phone::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 70px; height: 18px; border-radius: 999px; background: #000; }
.nb-phone .scr { position: absolute; inset: 30px 10px 12px; border-radius: 20px; background: #111114; overflow: hidden; }
.nb-phone .hd { padding: 10px 12px 6px; font: 800 0.7rem/1 'Playfair Display', Georgia, serif; color: #f5e7b3; letter-spacing: 0.2em; border-bottom: 1px solid rgba(255,255,255,0.08); }
.nb-phone .feed { animation: nbsFeed 18s linear infinite; }
@keyframes nbsFeed { 0%,8% { transform: translateY(0); } 92%,100% { transform: translateY(-55%); } }
.nb-phone .po { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nb-phone .po img { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.nb-phone .po b { display: block; font: 700 0.56rem/1.2 Inter, system-ui; color: #fff; } .nb-phone .po span { display: block; font: 500 0.58rem/1.35 Inter, system-ui; color: rgba(255,255,255,0.65); margin-top: 2px; }
.nb-phone .po i { display: inline-block; margin-top: 4px; font: 600 0.5rem/1 Inter, system-ui; color: #f5c542; letter-spacing: 0.08em; font-style: normal; }
.nb-nex .copy2 { color: #fff; }
.nb-nex .copy2 .k { font: 600 0.62rem/1 Inter, system-ui; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,231,179,0.7); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.nb-nex .copy2 .k i { width: 22px; height: 1px; background: #f5c542; }
.nb-nex .copy2 h3 { margin: 0 0 12px; font: italic 800 clamp(1.8rem, 3.4vw, 2.8rem)/1.05 'Playfair Display', Georgia, serif; letter-spacing: -0.02em; color: #fff; }
.nb-nex .copy2 p { margin: 0 0 16px; font: 400 1rem/1.55 Inter, system-ui; color: rgba(255,255,255,0.72); max-width: 40ch; }
.nb-nex .strip { display: flex; gap: 10px; flex-wrap: wrap; }
.nb-nex .strip span { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); font: 600 0.68rem/1 Inter, system-ui; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.8); display: inline-flex; gap: 6px; align-items: center; }
.nb-nex .strip span i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
.nb-nex .wrap2 { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
section.academyx-hero-bg h2.nb-moved, section.academyx-hero-bg p.nb-moved { display: none !important; }
@media (max-width: 860px) { section.academyx-hero-bg .nb-nex { grid-template-columns: 1fr; text-align: center; } .nb-nex .copy2 p { margin-inline: auto; } .nb-nex .strip { justify-content: center; } .nb-nex .wrap2 { grid-template-columns: 1fr; } .nb-phone { display: none; } }

/* ---------- 8. Synapse → AI classroom ---------- */
.synapse-card-shell { overflow: hidden; }
.nb-syn { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items: center; margin-bottom: 22px; }
.nb-syn .room { position: relative; border-radius: 22px; background: #0f1117; border: 1px solid rgba(255,255,255,0.08); overflow: hidden; aspect-ratio: 1.35; }
.nb-syn .room svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nb-syn .room .wb { fill: #1b1f2a; } .nb-syn .room .chalk { stroke: #e8ecf6; } .nb-syn .room .chalkB { stroke: #7dd3fc; }
.nb-syn .room text.hw { font: 600 15px/1 'Caveat', cursive; fill: #e8ecf6; }
.nb-syn .room .hw1, .nb-syn .room .hw2, .nb-syn .room .hw3 { stroke-dasharray: 400; stroke-dashoffset: 400; animation: nbsWrite 9s ease-out infinite; } .nb-syn .room .hw2 { animation-delay: 0s; } .nb-syn .room .hw3 { animation-delay: 0s; }
@keyframes nbsWrite { 0% { stroke-dashoffset: 400; } 30% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 400; } }
.nb-syn .room .t1 { opacity: 0; animation: nbsT 9s ease infinite; } .nb-syn .room .t2 { opacity: 0; animation: nbsT 9s ease 1.6s infinite; } .nb-syn .room .t3 { opacity: 0; animation: nbsT 9s ease 3.2s infinite; }
@keyframes nbsT { 0% { opacity: 0; } 12%,80% { opacity: 1; } 90%,100% { opacity: 0; } }
.nb-syn .room .orb { fill: url(#nbSynOrb); animation: nbiBreathe 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.nb-syn .room .armT { transform-box: fill-box; transform-origin: top left; animation: nbsWriteArm 9s ease-in-out infinite; }
@keyframes nbsWriteArm { 0%,5% { transform: rotate(0); } 8%,28% { transform: rotate(-8deg) translateX(2px); } 10% { transform: rotate(-12deg); } 14% { transform: rotate(-6deg); } 18% { transform: rotate(-14deg); } 22% { transform: rotate(-7deg); } 30%,100% { transform: rotate(0); } }
.nb-syn .room .hand { transform-box: fill-box; transform-origin: bottom center; animation: nbsRaise 9s ease-in-out infinite; } @keyframes nbsRaise { 0%,45% { transform: rotate(0); } 50%,62% { transform: rotate(-60deg); } 66%,100% { transform: rotate(0); } }
.nb-syn .room .q { opacity: 0; animation: nbsT 9s ease 4.6s infinite; }
.nb-syn .room .slide { transform-box: fill-box; transform-origin: center; animation: nbsSlide 9s ease-in-out infinite; } @keyframes nbsSlide { 0%,60% { transform: none; } 64% { transform: rotateY(90deg); } 68%,100% { transform: none; } }
.nb-syn .room .wv { transform-box: fill-box; transform-origin: center; animation: nbsWv 1.1s ease-in-out infinite alternate; } .nb-syn .room .wv:nth-of-type(2n) { animation-delay: -0.4s; } .nb-syn .room .wv:nth-of-type(3n) { animation-delay: -0.8s; }
@keyframes nbsWv { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
.synapse-card-shell { position: relative; } .synapse-card-shell > .neural { position: absolute; inset: 0; pointer-events: none; opacity: 0.35; z-index: 0; }
.synapse-card-shell > .neural svg { width: 100%; height: 100%; display: block; } .synapse-card-shell > .neural circle { fill: #7dd3fc; animation: nbsPulse 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .synapse-card-shell > .neural path { stroke: rgba(125,211,252,0.35); fill: none !important; stroke-width: 1; }
.synapse-card-shell > *:not(.neural) { position: relative; z-index: 1; }
.nb-agents { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.nb-agent { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #e5e5ea; transition: background 0.3s, border-color 0.3s, transform 0.3s; cursor: default; }
.nb-agent:hover { background: rgba(125,211,252,0.12); border-color: rgba(125,211,252,0.5); transform: translateY(-2px); }
.nb-agent svg { width: 30px; height: 30px; flex: none; stroke: #fff; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nb-agent b { display: block; font: 700 0.8rem/1.15 Inter, system-ui; } .nb-agent small { display: block; font: 500 0.66rem/1.3 Inter, system-ui; color: rgba(255,255,255,0.55); margin-top: 2px; }
.nb-agent:hover .dm { animation: nbsDemo 0.9s ease; transform-box: fill-box; transform-origin: center; } @keyframes nbsDemo { 30% { transform: rotateY(90deg); } 60% { transform: rotateY(0) scale(1.15); } }
.nb-agent .wv2 { transform-box: fill-box; transform-origin: center; } .nb-agent:hover .wv2 { animation: nbsWv 0.5s ease-in-out infinite alternate; }
.nb-voice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); font: 600 0.7rem/1 Inter, system-ui; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.nb-voice .bars { display: flex; gap: 3px; align-items: center; height: 18px; } .nb-voice .bars i { width: 3px; height: 100%; background: #7dd3fc; border-radius: 2px; animation: nbsWv 0.8s ease-in-out infinite alternate; transform-origin: center; } .nb-voice .bars i:nth-child(2n) { animation-delay: -0.3s; } .nb-voice .bars i:nth-child(3n) { animation-delay: -0.6s; }
.nb-syn-note { margin-top: 8px; font: 500 0.72rem/1.3 Inter, system-ui; color: rgba(255,255,255,0.5); }
.synapse-card-shell .nb-syn + * h2.text-silver-gradient, .synapse-card-shell h2.nb-newcopy { font-style: italic; font-family: 'Playfair Display', Georgia, serif !important; }
@media (max-width: 860px) { .nb-syn { grid-template-columns: 1fr; } .nb-agents { grid-template-columns: 1fr 1fr; } }

/* ---------- 9. Free Resources upgrades ---------- */
.nb-fr-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin: -14px 0 18px; flex-wrap: wrap; }
.nb-fr-head .kick { font: 800 0.6rem/1.2 Inter, system-ui; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 14px; background: rgba(245,197,66,0.28); transform: rotate(-2deg); border-radius: 2px; }
.nb-fr-head .hand { font: 600 1.2rem/1 'Caveat', cursive; color: rgba(17,17,16,0.7); transform: rotate(-3deg); display: inline-flex; align-items: center; gap: 6px; }
.nb-fr-head .hand svg { width: 34px; height: 24px; stroke: #111110; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nb-fr-search { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 10px 12px; border-radius: 999px; border: 1px solid rgba(17,17,16,0.15); background: #fff; font: 500 0.82rem/1 Inter, system-ui; color: rgba(17,17,16,0.6); cursor: pointer; box-shadow: 0 8px 20px -14px rgba(0,0,0,0.3); }
.nb-fr-search svg { width: 15px; height: 15px; stroke: #111110; fill: none; stroke-width: 2; stroke-linecap: round; } .nb-fr-search kbd { font: 600 0.62rem/1 Inter, system-ui; padding: 3px 6px; border: 1px solid rgba(17,17,16,0.2); border-radius: 5px; }
[id^="freeResource"], #pgComingSoonBtn { overflow: visible !important; }
[id^="freeResource"] .nb-stack, #pgComingSoonBtn .nb-stack { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
[id^="freeResource"] .nb-stack i, #pgComingSoonBtn .nb-stack i { position: absolute; inset: 0; border-radius: inherit; background: #fff; border: 1px solid rgba(17,17,16,0.1); transition: transform 0.45s cubic-bezier(0.22,1,0.36,1); }
[id^="freeResource"] .nb-stack i:nth-child(1), #pgComingSoonBtn .nb-stack i:nth-child(1) { transform: translate(4px, 6px) rotate(1.5deg); } [id^="freeResource"] .nb-stack i:nth-child(2), #pgComingSoonBtn .nb-stack i:nth-child(2) { transform: translate(8px, 12px) rotate(3deg); opacity: 0.7; }
[id^="freeResource"]:hover .nb-stack i:nth-child(1), #pgComingSoonBtn:hover .nb-stack i:nth-child(1) { transform: translate(8px, 10px) rotate(3deg); } [id^="freeResource"]:hover .nb-stack i:nth-child(2), #pgComingSoonBtn:hover .nb-stack i:nth-child(2) { transform: translate(16px, 20px) rotate(6deg); }
[id^="freeResource"] { border-radius: 26px; }
.nb-fr-top { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg); z-index: 4; padding: 5px 10px; background: #111110; color: #f5c542; font: 800 0.56rem/1 Inter, system-ui; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 999px; white-space: nowrap; display: inline-flex; gap: 5px; align-items: center; }
.nb-fr-top svg { width: 10px; height: 12px; stroke: #f5c542; fill: rgba(245,197,66,0.4); stroke-width: 1.5; }
/* hover micro-demos */
#freeResourceNotesBtn:hover .nb-fr .mv { animation: nbsPen 0.8s ease; } @keyframes nbsPen { 30% { transform: translate(-6px, 6px) rotate(-10deg); } 60% { transform: translate(4px, -2px) rotate(4deg); } }
#freeResourcePYQBtn:hover .nb-fr .mv { animation: nbsStampIn2 0.6s cubic-bezier(0.34,1.56,0.64,1); } @keyframes nbsStampIn2 { 0% { transform: scale(1.8); opacity: 0.3; } 100% { transform: scale(1); opacity: 1; } }
#freeResourceFlashcardBtn:hover .nb-fr .mv { animation: nbsFlip 0.7s ease; } @keyframes nbsFlip { 50% { transform: rotateY(90deg); } }
#freeResourceMindMapBtn:hover .nb-fr .mv { animation: nbsPulse 0.8s ease; }
#freeResourceQuizBtn:hover .nb-fr .mv { animation: nbsPop 0.6s cubic-bezier(0.34,1.56,0.64,1); } @keyframes nbsPop { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: scale(1); } }
#freeResourcePracticalsBtn:hover .nb-fr .mv { animation: nbsBubble 0.9s ease-in-out; } @keyframes nbsBubble { 50% { transform: translateY(-10px); opacity: 0.6; } }
#freeResourceAssignmentBtn:hover .nb-fr .mv { animation: nbsPen 0.8s ease; }
#pgComingSoonBtn:hover .nb-fr .mv { animation: nbsDoor 0.8s ease; } @keyframes nbsDoor { 50% { transform: scaleX(0.2); } }
.nb-fr-recent { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.nb-fr-recent > span { font: 600 0.62rem/1 Inter, system-ui; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(17,17,16,0.5); }
.nb-fr-recent button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid rgba(17,17,16,0.12); background: #fff; font: 600 0.74rem/1 Inter, system-ui; color: #111110; cursor: pointer; }
.nb-fr-recent button .nb-pdf { width: 22px; height: 20px; margin: 0; } .nb-fr-recent button .nb-pdf i { width: 14px; height: 18px; } .nb-fr-recent button .nb-pdf i:nth-child(3)::after { font-size: 4px; }

@media (prefers-reduced-motion: reduce) { .nb-xchg *, .nb-panel *, .nb-syn *, .nb-hall *, .nb-phone .feed, .nb-pass .net * { animation: none !important; } }

#claim-now-img-link { height: auto !important; } #claim-now-img-link > .relative { height: auto !important; }
.nb-xchg svg { preserveAspectRatio: xMidYMid meet; }
@media (max-width: 860px) { .nb-worldmap > .col.l, .nb-worldmap > .col.r, .nb-worldmap > .nb-globe, .nb-worldmap > .nb-globe-legend { grid-column: 1; grid-row: auto; } }

.nb-xchg .steps { top: 10px; bottom: auto; justify-content: flex-start; left: 10px; }
#claim-now-img-link .absolute.bottom-0 { padding: 10px 14px !important; background: linear-gradient(to top, rgba(0,0,0,0.35), transparent) !important; }
#claim-now-img-link .absolute.bottom-0 span.rounded-full { display: none !important; }
.synapse-card-shell h2.nb-newcopy { hyphens: none; -webkit-hyphens: none; }