.portfolio-page { padding-top: 60px; background: linear-gradient(122deg, #efff94 0%, #f6f6f4 38%, #efe9fb 68%, #d9c6ff 100%); }.portfolio-space { padding: 12px 0; }.portfolio-hero { padding-top: 25px; }.portfolio-hero-panel, .portfolio-category-panel, .operations-panel, .disclosure-panel { border: 1px solid rgba(255,255,255,.7); border-radius: 40px; background: rgba(255,255,255,.72); box-shadow: 0 18px 45px rgba(76,57,98,.12); backdrop-filter: blur(12px); }.portfolio-hero-panel { min-height: 480px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 58px; align-items: center; padding: 58px 66px; }.portfolio-copy h1 { max-width: 720px; margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: .96; letter-spacing: 0; }.portfolio-copy > p:not(.eyebrow) { max-width: 600px; margin: 24px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }.portfolio-stack { position: relative; min-height: 320px; }.app-tile { position: absolute; width: 190px; height: 250px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border: 7px solid #161616; border-radius: 30px; color: #fff; box-shadow: 0 22px 44px rgba(36,23,65,.22); }.app-tile i { align-self: flex-end; font-size: 36px; }.app-tile span { font-size: 16px; font-weight: 900; letter-spacing: .08em; }.tile-one { z-index: 3; top: 32px; left: 50%; background: radial-gradient(circle at 72% 24%, #ffafe6, transparent 24%), linear-gradient(145deg, #3a477f, #170d27 70%); transform: translateX(-50%) rotate(7deg); }.tile-two { z-index: 2; top: 6px; left: 17%; background: radial-gradient(circle at 28% 18%, #d4ff00, transparent 24%), linear-gradient(145deg, #534783, #1b172b 72%); transform: rotate(-12deg); }.tile-three { z-index: 1; right: 12%; bottom: 1px; background: radial-gradient(circle at 70% 20%, #b98aff, transparent 25%), linear-gradient(145deg, #453d6b, #14131d 72%); transform: rotate(15deg); }.portfolio-category-panel, .operations-panel { padding: 50px 56px; }.portfolio-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.portfolio-category-card { position: relative; min-height: 286px; padding: 28px; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: rgba(255,255,255,.68); box-shadow: 0 10px 28px rgba(76,57,98,.08); transition: transform .3s ease-out, border-color .3s ease-out, box-shadow .3s ease-out; }.portfolio-category-card:hover { transform: translateY(-5px); border-color: rgba(168,85,247,.45); box-shadow: 0 16px 34px rgba(128,84,184,.14); }.portfolio-category-card > i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--purple); color: #fff; font-size: 19px; }.category-number { position: absolute; top: 28px; right: 28px; color: #9ca1ac; font-size: 12px; font-weight: 900; }.portfolio-category-card h2 { margin: 56px 0 10px; font-size: 21px; line-height: 1.15; }.portfolio-category-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }.section-title { text-align: center; }.section-title h2, .disclosure-panel h2 { max-width: 850px; margin: 0 auto; font-size: clamp(30px, 3.7vw, 48px); line-height: 1.05; letter-spacing: 0; }.operations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; }.operations-grid span { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 18px; border: 1px solid rgba(255,255,255,.7); border-radius: 20px; background: rgba(255,255,255,.68); font-size: 16px; font-weight: 800; transition: transform .3s ease-out, border-color .3s ease-out; }.operations-grid span:hover { transform: translateY(-3px); border-color: rgba(168,85,247,.45); }.operations-grid i { color: var(--purple); font-size: 17px; }.disclosure-section { padding-bottom: 25px; }.disclosure-panel { display: flex; justify-content: space-between; align-items: center; gap: 42px; padding: 50px 56px; }.disclosure-panel h2 { max-width: 700px; margin: 0; }.disclosure-panel > div > p:not(.eyebrow) { max-width: 730px; margin: 16px 0 0; color: var(--muted); font-size: 16px; line-height: 1.6; }.disclosure-panel .button { flex: 0 0 auto; }
@media (max-width: 840px) { .portfolio-hero { padding-top: 18px; }.portfolio-hero-panel, .portfolio-category-panel, .operations-panel, .disclosure-panel { border-radius: 28px; }.portfolio-hero-panel { grid-template-columns: 1fr; gap: 30px; padding: 42px 24px; }.portfolio-stack { min-height: 290px; transform: scale(.82); transform-origin: top center; }.portfolio-category-panel, .operations-panel { padding: 34px 24px; }.portfolio-category-grid, .operations-grid { grid-template-columns: 1fr; }.portfolio-category-card { min-height: auto; }.portfolio-category-card h2 { margin-top: 30px; }.disclosure-panel { align-items: flex-start; flex-direction: column; padding: 34px 24px; }.disclosure-panel .button { width: 100%; } }