:root{--work-cyan:#55dcff;--work-blue:#1a64ff;--work-bg:#020817;--work-card:rgba(7,26,52,.78)}
body.work-page{background:var(--work-bg);color:#eefaff;min-height:100vh}
.work-shell{position:relative;z-index:2;max-width:1500px;margin:auto;padding:150px clamp(18px,5vw,76px) 80px}
.work-hero{min-height:42vh;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid rgba(151,220,255,.18);padding-bottom:54px}
.work-back{color:var(--work-cyan);text-decoration:none;font:500 .82rem Inter,sans-serif;letter-spacing:.08em;margin-bottom:34px;width:max-content}
.work-kicker{font:500 .74rem Inter,sans-serif;letter-spacing:.24em;color:var(--work-cyan)}
.work-hero h1{font:500 clamp(3.7rem,9vw,8.5rem)/.9 Outfit,sans-serif;letter-spacing:-.065em;margin:22px 0 24px}
.work-hero h1 em{font-family:"Cormorant Garamond",serif;font-weight:400;color:var(--work-cyan)}
.work-hero p{max-width:700px;color:#a9bed3;font-size:1.08rem;line-height:1.7}
.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:70px 0}
.category-card{min-height:260px;padding:28px;border:1px solid rgba(100,211,255,.2);border-radius:24px;background:linear-gradient(145deg,rgba(12,43,72,.84),rgba(3,14,30,.96));color:#fff;text-decoration:none;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.category-card:before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;right:-50px;top:-50px;background:#21cfff;filter:blur(70px);opacity:.15}
.category-card:hover{transform:translateY(-7px);border-color:rgba(100,220,255,.62);box-shadow:0 26px 60px rgba(0,120,220,.18)}
.category-num{font:500 .75rem Inter,sans-serif;color:var(--work-cyan);letter-spacing:.17em}
.category-card h2{margin:auto 0 10px;font:500 clamp(1.7rem,3vw,2.6rem) Outfit,sans-serif;letter-spacing:-.035em}
.category-card p{color:#a9bed3;line-height:1.55;margin:0 0 24px}
.category-arrow{font-size:1.7rem;color:var(--work-cyan)}
.portfolio-content{padding:64px 0}
.batch{margin-bottom:54px}
.batch-label{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;font:600 clamp(1.15rem,2vw,1.55rem) Outfit,sans-serif}
.batch-label span{font:500 .72rem Inter,sans-serif;letter-spacing:.12em;color:#85cce7;text-transform:uppercase}
.design-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:9px;border:1px solid rgba(82,213,255,.14);border-radius:18px;background:rgba(5,22,42,.42)}
.design-card,.proof-card{appearance:none;border:0;padding:0;background:#07162b;border-radius:10px;overflow:hidden;cursor:zoom-in;min-width:0}
.design-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .35s ease}
.design-card:hover img,.proof-card:hover img{transform:scale(1.025)}
.proof-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.proof-grid.reach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.proof-card img{display:block;width:100%;height:auto;transition:transform .35s ease}
.video-filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px}
.filter-btn{border:1px solid rgba(104,210,255,.27);border-radius:999px;padding:10px 15px;background:rgba(10,43,76,.45);color:#dff8ff;cursor:pointer;font:500 .82rem Inter,sans-serif}
.filter-btn.active{background:var(--work-cyan);color:#03111f;border-color:var(--work-cyan)}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.video-card{border:1px solid rgba(100,211,255,.18);border-radius:18px;overflow:hidden;background:var(--work-card)}
.video-frame{background:#000;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.video-card.vertical .video-frame{aspect-ratio:9/16;max-height:620px}
.video-frame video{width:100%;height:100%;object-fit:contain;background:#000}
.video-meta{padding:15px 17px}.video-meta strong{display:block;font:600 1rem Outfit,sans-serif}.video-meta span{display:block;margin-top:4px;color:#83b5ce;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}
.website-grid,.platform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.website-card{min-height:360px;padding:28px;border-radius:24px;border:1px solid rgba(95,221,255,.2);background:linear-gradient(145deg,rgba(12,42,69,.9),rgba(2,14,28,.96));display:flex;flex-direction:column;transition:.3s}
.website-card:hover{transform:translateY(-7px);border-color:rgba(95,221,255,.55)}
.website-logo{height:150px;display:grid;place-items:center;margin-bottom:24px}.website-logo img{max-width:82%;max-height:125px;object-fit:contain}
.website-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}.website-meta h2{font:600 1.3rem Outfit,sans-serif;margin:0}
.site-status{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;border-radius:999px;padding:7px 10px}.site-status.finished{background:rgba(51,225,147,.12);color:#63f0aa;border:1px solid rgba(51,225,147,.28)}.site-status.under-work{background:rgba(255,191,71,.12);color:#ffd17c;border:1px solid rgba(255,191,71,.28)}
.visit-site{margin-top:auto;display:flex;justify-content:space-between;align-items:center;color:#fff;text-decoration:none;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;font-weight:600}
.portfolio-lightbox{position:fixed;inset:0;z-index:3000;background:rgba(0,5,14,.95);display:none;place-items:center;padding:24px}.portfolio-lightbox.open{display:grid}.portfolio-lightbox img{max-width:94vw;max-height:90vh;object-fit:contain}.lightbox-close{position:fixed;right:22px;top:18px;border:0;background:transparent;color:#fff;font-size:2.4rem;cursor:pointer}
.page-cta{margin-top:70px;padding:52px;border:1px solid rgba(90,211,255,.2);border-radius:26px;background:linear-gradient(145deg,rgba(10,42,74,.72),rgba(2,13,30,.9));display:flex;justify-content:space-between;align-items:center;gap:25px}.page-cta h2{font:500 clamp(2rem,4vw,4rem) Outfit,sans-serif;margin:0}.page-cta a{white-space:nowrap;color:#03111f;background:var(--work-cyan);padding:14px 20px;border-radius:999px;text-decoration:none;font-weight:700}
.page-footer{text-align:center;color:#7fa0b7;padding:30px 18px 50px;font-size:.82rem}
@media(max-width:1000px){.category-grid,.video-grid,.website-grid,.platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.design-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.work-shell{padding:115px 15px 50px}.work-hero{min-height:36vh}.category-grid,.video-grid,.website-grid,.platform-grid,.proof-grid,.proof-grid.reach-grid{grid-template-columns:1fr}.design-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:6px}.category-card{min-height:220px}.website-card{min-height:320px;padding:22px}.page-cta{padding:30px 22px;align-items:flex-start;flex-direction:column}.video-card.vertical .video-frame{max-height:none}}