/* =============================== WIP ROADMAP CSS (clean + compact) =============================== */

.page-roadmap{padding:0 0 4rem;}
.page-roadmap .container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;}
@media (max-width:700px){.page-roadmap .container{padding:0 16px;}}

/* HERO */
.page-hero-roadmap{position:relative;overflow:hidden;padding:0;border-bottom:1px solid rgba(255,255,255,.06);}
.page-hero-roadmap .hero-bg-overlay{position:absolute;inset:0;background:radial-gradient(900px 380px at 20% 10%,rgba(246,212,74,.14),transparent 60%),radial-gradient(900px 380px at 80% 20%,rgba(75,210,255,.10),transparent 62%),linear-gradient(to bottom,rgba(0,0,0,.30),rgba(0,0,0,.72));pointer-events:none;}
.page-hero-roadmap .page-hero-inner{position:relative;padding:78px 0 24px;}
.page-hero-roadmap .page-hero-grid{display:grid;grid-template-columns:1fr 520px;gap:24px;align-items:flex-start;}
.page-hero-roadmap .page-hero-text{max-width:720px;}
.page-hero-roadmap .page-hero-text h1{margin:10px 0;}
.page-hero-roadmap .page-hero-subtitle{max-width:62ch;color:rgba(234,242,255,.72);margin:0 0 16px;}
.page-hero-roadmap .hero-actions{display:flex;gap:12px;align-items:center;margin:18px 0 12px;flex-wrap:wrap;}
.page-hero-roadmap .hero-meta{display:flex;gap:10px;overflow-x:auto;white-space:nowrap;padding-bottom:4px;}
.page-hero-roadmap .hero-meta::-webkit-scrollbar{display:none;}
.page-hero-roadmap .hero-stats{justify-self:end;max-width:520px;width:100%;}
.page-hero-roadmap .hero-stats-inner{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.45);padding:18px;}
.page-hero-roadmap .hero-stats-title{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:rgba(234,242,255,.80);}
.page-hero-roadmap .hero-stats-sub{margin-top:6px;font-size:13px;color:rgba(234,242,255,.65);}
.page-hero-roadmap .hero-stats-grid{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.page-hero-roadmap .stat{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;}
.page-hero-roadmap .stat-label{font-size:12px;color:rgba(234,242,255,.65);}
.page-hero-roadmap .stat-value{margin-top:6px;font-size:22px;font-weight:800;color:rgba(234,242,255,.96);}
.page-hero-roadmap .hero-stats-divider{height:1px;background:rgba(255,255,255,.10);margin:14px 0 12px;}
.page-hero-roadmap .hero-stats-mini{display:grid;gap:8px;}
.page-hero-roadmap .mini-row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);}
.page-hero-roadmap .mini-label{color:rgba(234,242,255,.72);font-size:13px;}
.page-hero-roadmap .mini-value{font-weight:800;}
.page-hero-roadmap .meta-pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(234,242,255,.85);font-size:12px;font-weight:600;letter-spacing:.02em;}
.page-hero-roadmap .meta-pill:hover{background:rgba(255,255,255,.07);border-color:rgba(246,212,74,.45);}
@media (max-width:900px){.page-hero-roadmap .page-hero-inner{padding:56px 0 18px;}.page-hero-roadmap .page-hero-grid{grid-template-columns:1fr;}.page-hero-roadmap .hero-stats{max-width:none;}.page-hero-roadmap .page-hero-text{max-width:none;}}

/* FILTERS */
.roadmap-filters{background:linear-gradient(to right,rgba(9,14,28,.55),rgba(9,14,28,.22),rgba(9,14,28,.55));border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:16px 0 14px;margin:0;}
.roadmap-filters>.container{display:flex;gap:10px;overflow-x:auto;white-space:nowrap;}
.roadmap-filters>.container::-webkit-scrollbar{display:none;}
.roadmap-filters button{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:.5rem .9rem;border-radius:999px;color:#fff;cursor:pointer;}
.roadmap-filters button.active{background:#f6d44a;color:#000;}

/* GRID */
.roadmap-list{background:linear-gradient(to bottom,rgba(9,14,28,.45),rgba(0,0,0,0));padding:26px 0 90px;}
.roadmap-list>.container{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;align-items:start;}
@media (max-width:1100px){.roadmap-list>.container{grid-template-columns:repeat(2,1fr);}}
@media (max-width:700px){.roadmap-list>.container{grid-template-columns:1fr;}}

/* DOWNLOADS-STYLE CARD */
.wip-card{background:rgba(0,0,0,.20);border:1px solid rgba(246,212,74,.22);border-radius:18px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.35);transition:transform .15s ease,border-color .15s ease,background .15s ease;}
.wip-card:hover{transform:translateY(-2px);border-color:rgba(246,212,74,.40);background:rgba(0,0,0,.26);}

.wip-media{position:relative;display:block;aspect-ratio:16/9;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.10);overflow:hidden;cursor:pointer;}
.wip-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform .25s ease,filter .25s ease;filter:saturate(1.02) contrast(1.02);}
.wip-card:hover .wip-media img{transform:scale(1.06);filter:saturate(1.06) contrast(1.06);}
.wip-media-empty{display:block;}
.wip-media-empty::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(246,212,74,.14),rgba(75,210,255,.10));opacity:.7;}

.wip-ribbon{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(246,212,74,.40);background:rgba(0,0,0,.55);color:#f6d44a;font-size:12px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;}

.wip-body{padding:16px 16px 14px;}
.wip-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.wip-title{margin:0;font-size:20px;line-height:1.2;}
.wip-pill{flex:0 0 auto;display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:rgba(234,242,255,.90);font-size:12px;font-weight:700;white-space:nowrap;}
.wip-summary{margin:10px 0 0;color:rgba(234,242,255,.75);line-height:1.45;}

.wip-meta{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:12px;color:rgba(234,242,255,.65);font-size:13px;}
.wip-meta strong{color:rgba(234,242,255,.85);font-weight:700;}

.progress-wrap{margin:14px 0 0;background:rgba(255,255,255,.08);height:10px;border-radius:999px;position:relative;overflow:hidden;}
.progress-wrap>span{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;color:rgba(234,242,255,.85);}
.progress-bar{height:100%;border-radius:inherit;transition:width .6s ease;}
.progress-bar.red{background:#c0392b;}
.progress-bar.green{background:#2ecc71;}
.progress-bar.complete{animation:pulse 2s infinite;}
@keyframes pulse{0%{filter:brightness(1);}50%{filter:brightness(1.35);}100%{filter:brightness(1);}}

.wip-status{margin-top:12px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:rgba(234,242,255,.82);font-size:13px;line-height:1.35;}

.wip-section{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.10);}
.wip-section-title{font-size:12px;font-weight:900;letter-spacing:.10em;text-transform:uppercase;color:rgba(234,242,255,.78);margin:0 0 8px;}

/* TODO = REAL LIST */
.todo-list{margin:0;padding-left:1.2rem;list-style:disc;color:rgba(234,242,255,.90);}
.todo-list li{margin:.35rem 0;line-height:1.35;}
.todo-list li.is-hidden{display:none;}
.todo-list li.todo-expand{list-style:none;padding-left:0;margin-top:8px;color:rgba(234,242,255,.72);cursor:pointer;opacity:.9;}
.todo-list li.todo-expand:hover{color:rgba(246,212,74,.95);text-decoration:underline;opacity:1;}

/* Extra thumbs */
.wip-thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.wip-thumbs img{width:58px;height:58px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:transform .15s ease,border-color .15s ease;}
.wip-thumbs img:hover{transform:translateY(-1px);border-color:rgba(246,212,74,.45);}

/* EMPTY */
.empty-state{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:20px;max-width:760px;grid-column:1/-1;justify-self:center;text-align:center;}
.empty-state h2{margin:0 0 8px;}
.empty-state .muted{color:rgba(234,242,255,.72);margin:0;}

/* Lightbox (your existing JS uses these) */
.lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:1.25rem;z-index:9999;}
.lb-inner{position:relative;max-width:min(1100px,96vw);max-height:90vh;}
.lb-img{display:block;max-width:100%;max-height:90vh;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55);}
.lb-close{position:absolute;top:-12px;right:-12px;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(10,12,18,.85);color:#fff;font-size:22px;line-height:38px;cursor:pointer;}
.lb-close:hover{border-color:rgba(246,212,74,.6);}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:1.25rem;z-index:9999;}
.lightbox-inner{position:relative;max-width:min(1100px,96vw);max-height:90vh;}
.lightbox-img{display:block;max-width:100%;max-height:90vh;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55);}
.lightbox-close{position:absolute;top:-12px;right:-12px;width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(10,12,18,.85);color:#fff;font-size:22px;line-height:38px;cursor:pointer;}
.lightbox-close:hover{border-color:rgba(246,212,74,.6);}