.works-page { background: #10101d; }
.works-hero { min-height: 390px; padding: calc(var(--nav-height) + 92px) 0 92px; text-align: center; background: radial-gradient(circle at 50% 20%, rgba(112, 61, 245, .32), transparent 44%), radial-gradient(circle at 76% 82%, rgba(0, 198, 255, .15), transparent 36%), var(--bg-dark); }
.works-hero h1 { margin: 18px 0; font-size: clamp(2.8rem, 5vw, 4.5rem); }
.works-hero p { max-width: 650px; margin: 0 auto; color: var(--text-secondary); font-size: 1.1rem; line-height: 1.8; }
.works-category-nav { position: sticky; z-index: 20; top: var(--nav-height); display: flex; justify-content: center; gap: 8px; padding: 15px 20px; overflow-x: auto; border-bottom: 1px solid var(--border); background: rgba(16, 16, 29, .9); backdrop-filter: blur(16px); }
.works-category-nav a { flex: 0 0 auto; padding: 9px 16px; color: var(--text-secondary); font-size: .9rem; border-radius: 999px; transition: var(--transition); }
.works-category-nav a:hover { color: #fff; background: rgba(125, 78, 255, .22); }
.works-section { padding: 88px 0; }
.works-section-alt { background: linear-gradient(120deg, rgba(40, 34, 71, .48), rgba(13, 14, 30, .5)); }
.works-section-heading { max-width: 620px; margin-bottom: 38px; }
.works-section-heading h2 { margin: 13px 0; font-size: clamp(2rem, 3vw, 2.8rem); }
.works-section-heading p { color: var(--text-secondary); line-height: 1.8; }
.works-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.works-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.works-grid-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-card { overflow: hidden; cursor: zoom-in; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.work-card:hover { transform: translateY(-7px); border-color: rgba(140, 100, 255, .7); box-shadow: 0 22px 42px rgba(0, 0, 0, .25); }
.work-card img { display: block; width: 100%; aspect-ratio: 1 / .76; object-fit: cover; transition: transform .35s ease; }
.works-section#cyber-ip .work-card img { padding: 0; object-fit: cover; background: #121225; }
.works-section#figures .work-card img { aspect-ratio: 1 / 1; object-fit: contain; background-color: #171729; background-position: center; background-size: cover; background-repeat: no-repeat; }
.works-section#figures .work-card:nth-child(1) img { background-image: url('../images/works/figure-lamb.webp'); }
.works-section#figures .work-card:nth-child(2) img { background-image: url('../images/works/figure-cat.webp'); }
.works-section#figures .work-card:nth-child(3) img { background-image: url('../images/works/figure-robot.webp'); }
.works-section#figures .work-card:nth-child(4) img { background-image: url('../images/works/figure-lion.webp'); }
.works-section#figures .work-card:nth-child(5) img { background-image: none; background-color: #eef0f4; }
.works-section#figures .work-card:nth-child(6) img { background-image: url('../images/works/figure-cyber-cat.webp'); }
.works-section#crafts .work-card img { aspect-ratio: 1 / 1; object-fit: contain; background-color: #171729; background-position: center; background-size: cover; background-repeat: no-repeat; }
.works-section#crafts .work-card:nth-child(1) img { background-image: url('../images/works/craft-orb.webp'); }
.works-section#crafts .work-card:nth-child(2) img { background-image: url('../images/works/craft-rabbit.webp'); }
.works-section#crafts .work-card:nth-child(3) img { background-image: url('../images/works/craft-mermaid.webp'); }
.works-section#crafts .work-card:nth-child(4) img { background-image: url('../images/works/craft-basketball-rabbit.webp'); }
.works-section#products .work-card img { padding: 0; aspect-ratio: 1 / 1; object-fit: contain; background-color: #171729; background-position: center; background-size: cover; background-repeat: no-repeat; }
.works-section#products .work-card:nth-child(1) img { background-image: url('../images/works/product-cat.webp'); }
.works-section#products .work-card:nth-child(2) img { background-image: url('../images/works/product-music-box.webp'); }
.works-section#products .work-card:nth-child(3) img { background-image: url('../images/works/product-usb.webp'); }
.works-section#products .work-card:nth-child(4) img { background-image: url('../images/works/product-scooter.webp'); }
.works-section#products .work-card:nth-child(5) img { background-image: none; background-color: #f3f3f5; }
.works-section#products .work-card:nth-child(6) img { background-image: url('../images/works/product-bag.webp'); }
.works-section#products .work-card:nth-child(7) img { background-image: url('../images/works/product-clothes.webp'); }
.works-section#products .work-card:nth-child(8) img { background-image: url('../images/works/product-glasses.webp'); }
.works-section#products .work-card:nth-child(9) img { background-image: url('../images/works/product-umbrella.webp'); }
.work-card:hover img { transform: scale(1.04); }
.works-section#figures .work-card:hover img { transform: none; }
.works-section#crafts .work-card:hover img { transform: none; }
.works-section#products .work-card:hover img { transform: none; }
.work-card div { padding: 18px 19px 20px; }
.work-card h3 { font-size: 1.1rem; }
.work-card p { margin-top: 7px; color: var(--text-secondary); font-size: .9rem; }
.music-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.music-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: #1d1c34; }
.music-card > img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #121225; }
.music-card-body { padding: 20px; }
.music-card-body > span { color: #a58cff; font-size: .76rem; letter-spacing: .1em; }
.music-card-body h3 { margin: 7px 0 16px; font-size: 1.3rem; }
.media-play-button, .video-open-button { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; color: #fff; font: inherit; font-weight: 700; border: 0; border-radius: 999px; background: var(--gradient-primary); cursor: pointer; }
.media-play-button b { font-size: .86rem; }
.media-play-button em { font-style: normal; }
.works-section#video .works-section-heading { margin-right: auto; margin-left: auto; text-align: center; }
.video-showcase { display: grid; grid-template-columns: 360px minmax(0, 1fr); width: min(100%, 1040px); min-height: 330px; margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-card); }
.video-showcase > img { width: 100%; height: 330px; padding: 20px; object-fit: contain; background: radial-gradient(circle, rgba(87, 83, 199, .42), #121224 72%); }
.video-showcase > div { align-self: center; max-width: 560px; padding: 38px 52px; }
.video-showcase h3 { margin: 13px 0; font-size: 1.8rem; }
.video-showcase p { margin-bottom: 23px; color: var(--text-secondary); line-height: 1.8; }
.works-modal, .works-lightbox { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(3, 3, 12, .86); backdrop-filter: blur(8px); }
.works-modal[hidden], .works-lightbox[hidden] { display: none; }
.works-modal-panel { position: relative; width: min(920px, 100%); }
.works-modal video { display: block; width: 100%; max-height: 78vh; border-radius: 16px; background: #000; }
.works-modal-close, .works-lightbox button { position: absolute; z-index: 1; top: -14px; right: -14px; width: 42px; height: 42px; color: #fff; font-size: 27px; line-height: 1; border: 1px solid var(--border); border-radius: 50%; background: #28263e; cursor: pointer; }
.works-lightbox { grid-template-rows: minmax(0, 1fr) auto; }
.works-lightbox img { max-width: min(900px, 94vw); max-height: 80vh; object-fit: contain; border-radius: 12px; }
.works-lightbox p { margin-top: 14px; font-weight: 700; }
.works-lightbox button { top: 24px; right: 24px; }
@media (max-width: 900px) { .works-grid, .works-grid-four, .works-grid-products, .music-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .video-showcase { grid-template-columns: 1fr; max-width: 580px; } .video-showcase > img { height: 270px; } .video-showcase > div { max-width: none; padding: 32px; } }
@media (max-width: 600px) { .works-hero { min-height: 330px; } .works-section { padding: 62px 0; } .works-grid, .works-grid-four, .works-grid-products, .music-grid { grid-template-columns: 1fr; } .works-category-nav { justify-content: flex-start; } .video-showcase > div { padding: 27px; } }