/* ==========================================================================
   About + Projects pages (uniform with the home page)
   ========================================================================== */

/* ---------- about: story ---------- */
.about-story { background: radial-gradient(800px 360px at 100% 0, rgba(91, 80, 245, .07), transparent 70%), #fff; }
.glance { position: relative; overflow: hidden; isolation: isolate; border-radius: 30px; padding: 36px 34px; color: #dfe3f7; background: linear-gradient(150deg, #1b1f6b 0%, #4a2fbd 60%, #8b3df0 100%); box-shadow: 0 40px 70px -34px rgba(60, 40, 180, .7); display: grid; gap: 14px; }
.glance .orb { opacity: .35; }
.glance .orb.o1 { width: 260px; height: 260px; top: -100px; right: -60px; left: auto; background: #19b8d6; }
.glance .orb.o2 { width: 240px; height: 240px; bottom: -110px; left: -60px; right: auto; background: #f0745b; }
.glance-t { color: #fff; font-family: var(--font-h); font-size: 1.25rem; margin-bottom: 4px; }
.glance-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); }
.glance-row .ico-badge { background: rgba(255, 255, 255, .16); color: #fff; }
.glance-row small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #c3caef; }
.glance-row strong { color: #fff; font-weight: 600; }

/* ---------- about: mission / vision ---------- */
.mv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.mv-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 30px; padding: 40px 38px; box-shadow: var(--shadow); overflow: hidden; }
.mv-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, #5b50f5, #19b8d6); }
.mv-card:nth-child(2)::before { background: linear-gradient(90deg, #f0745b, #8b3df0); }
.mv-card::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(--grad-soft); pointer-events: none; }
.mv-card .ico-badge.lg { margin-bottom: 20px; background: var(--grad); color: #fff; }
.mv-card h3 { font-size: 1.5rem; }
.mv-card > p { font-size: 1.02rem; }
.mv-card ul { display: grid; gap: 10px; margin-top: 18px; position: relative; z-index: 1; }
.mv-card li { display: flex; gap: 10px; align-items: center; font-weight: 500; color: var(--ink); font-size: .95rem; }
.mv-card li .ic { color: #16a34a; width: 18px; height: 18px; }

/* ---------- about: values ---------- */
.val-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.val { --a: #5b50f5; --b: #19b8d6; position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 34px 28px 30px; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; }
.val:nth-child(2) { --a: #8b3df0; --b: #e0559c; }
.val:nth-child(3) { --a: #f0745b; --b: #f4a83a; }
.val:nth-child(4) { --a: #12a4c4; --b: #5b50f5; }
.val::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--a), var(--b)); }
.val:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -30px var(--a); }
.val .ico-badge.lg { margin-bottom: 18px; background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; }
.val h3 { font-size: 1.2rem; }
.val p { margin: 0; font-size: .93rem; }
.val-n { position: absolute; right: 22px; top: 22px; font-family: var(--font-h); font-weight: 800; font-size: 2.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--a) 35%, transparent); }

/* stats on its own white row */
.stats-sec { padding: 0 0 96px; }
.stats-sec .stats-band { width: 100%; margin: 0; }
.all-card { background: var(--grad-soft); border-style: dashed; }

/* ---------- projects: technology tiles ---------- */
.tech-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tt { display: flex; align-items: center; gap: 14px; text-align: left; padding: 20px 20px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); color: var(--text); transition: transform .25s, box-shadow .25s, border-color .25s; }
.tt:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(91, 80, 245, .35); }
.tt > span:nth-child(2) { flex: 1; min-width: 0; }
.tt b { display: block; color: var(--ink); font-family: var(--font-h); font-size: 1rem; }
.tt small { color: var(--muted); font-size: .8rem; }
.tt .go { width: 18px; height: 18px; color: var(--brand); opacity: 0; transform: translateX(-6px); transition: .25s; }
.tt:hover .go { opacity: 1; transform: none; }
.tt:hover .ico-badge { background: var(--grad); color: #fff; }

/* filters with counts */
.filter em { font-style: normal; font-size: .72rem; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.filter.is-active em { background: rgba(255, 255, 255, .25); color: #fff; }

@media (max-width: 1099px) {
	.mv-grid { grid-template-columns: minmax(0, 1fr); }
	.val-grid, .tech-tiles { grid-template-columns: repeat(2, 1fr); }
	.stats-sec { padding-bottom: 72px; }
}
@media (max-width: 680px) {
	.val-grid, .tech-tiles { grid-template-columns: 1fr; }
	.glance, .mv-card { padding: 28px 22px; border-radius: 24px; }
	.stats-sec { padding-bottom: 56px; }
}
.work-grid { align-items: start; } .work-grid .wf-shot { aspect-ratio: 4 / 3; flex: none; } .work-frame { flex: none; }

/* ---------- pagination ---------- */
.work.pg-hide { display: none; }
.pager { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.pager.is-single { display: none; }
.pager-info { margin: 0; font-size: .88rem; color: var(--muted); }
.pager-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); }
.pager-btn { min-width: 42px; height: 42px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-weight: 700; font-size: .95rem; transition: background .2s, color .2s, transform .2s; }
.pager-btn:hover:not(:disabled):not(.is-active) { background: var(--grad-soft); color: var(--brand); }
.pager-btn.is-active { background: var(--grad); color: #fff; box-shadow: 0 10px 20px -8px rgba(91, 80, 245, .6); }
.pager-btn.prev, .pager-btn.next { font-size: 1.4rem; line-height: 1; padding: 0 16px; border: 1px solid var(--line); }
.pager-btn:disabled { opacity: .4; cursor: not-allowed; }
.pager-gap { min-width: 22px; text-align: center; color: var(--muted); }
@media (max-width: 680px) { .pager-bar { gap: 4px; padding: 6px; } .pager-btn { min-width: 38px; height: 38px; padding: 0 10px; } }


/* ---------- in-depth guide block ---------- */
.guide-sec { background: #fff; }
.guide { position: relative; padding: 8px 0; }
.guide h2 { margin-bottom: 22px; }
.guide p { font-size: 1.04rem; line-height: 1.8; margin-bottom: 1.1em; }
.guide p:first-of-type::first-letter { font-family: var(--font-h); font-weight: 800; font-size: 3.2rem; float: left; line-height: .9; padding: 6px 10px 0 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }