/* ROE Solutions — shared dark theme */
:root{
  --bg:#0e1117; --bg-soft:#151a23; --card:#171d28; --card-hover:#1d2531;
  --border:#263041; --text:#e6edf3; --text-dim:#9aa7b8;
  --accent:#4f8cff; --accent-2:#22d3ee;
  --live:#34d399; --dev:#fbbf24; --done:#818cf8; --soon:#94a3b8; --danger:#f87171;
  --radius:16px; --maxw:1080px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#1a2233 0%,var(--bg) 55%) no-repeat,var(--bg);
  color:var(--text);min-height:100vh;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* header / brand */
header.site{padding:60px 0 24px;text-align:center;}
.brand{display:inline-flex;align-items:center;gap:12px;margin-bottom:20px;}
.brand .logo{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  font-weight:800;font-size:20px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 20px rgba(79,140,255,.35);}
.brand .name{font-size:20px;font-weight:700;}
.brand .name span{color:var(--accent-2);}
header.site h1{font-size:clamp(28px,5vw,44px);font-weight:800;line-height:1.15;margin-bottom:12px;
  background:linear-gradient(180deg,#fff,#c8d3e2);-webkit-background-clip:text;background-clip:text;color:transparent;}
header.site p.sub{color:var(--text-dim);font-size:clamp(15px,2.4vw,18px);max-width:560px;margin:0 auto;}

/* project grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding:20px 0 40px;}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;text-decoration:none;color:inherit;overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:0;transition:opacity .18s ease;}
.card:hover{transform:translateY(-4px);background:var(--card-hover);border-color:#38455c;box-shadow:0 14px 34px rgba(0,0,0,.35);}
.card:hover::before{opacity:1;}
.card.soon{cursor:default;}
.card.soon:hover{transform:none;box-shadow:none;}
.card-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px;overflow:hidden;
  background:var(--bg-soft);border:1px solid var(--border);margin-bottom:18px;}
.card-icon img{width:100%;height:100%;object-fit:cover;}
.card h2{font-size:20px;font-weight:700;margin-bottom:8px;}
.card p.desc{color:var(--text-dim);font-size:14.5px;flex:1 0 auto;margin-bottom:18px;}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px;}
.tag{font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;
  background:var(--bg-soft);color:var(--text-dim);border:1px solid var(--border);}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;}
.status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;}
.status .dot{width:8px;height:8px;border-radius:50%;}
.status.live .dot{background:var(--live);box-shadow:0 0 0 4px rgba(52,211,153,.15);}
.status.dev .dot{background:var(--dev);box-shadow:0 0 0 4px rgba(251,191,36,.15);}
.status.done .dot{background:var(--done);box-shadow:0 0 0 4px rgba(129,140,248,.15);}
.status.soon .dot{background:var(--soon);}
.status.live{color:var(--live);} .status.dev{color:var(--dev);} .status.done{color:var(--done);} .status.soon{color:var(--soon);}
.go{font-size:13.5px;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:5px;}
.card:hover .go .arrow{transform:translateX(3px);} .go .arrow{transition:transform .18s ease;}
.empty{grid-column:1/-1;text-align:center;color:var(--text-dim);padding:50px 20px;border:1px dashed var(--border);border-radius:var(--radius);}

/* footer */
footer.site{text-align:center;color:var(--text-dim);font-size:13.5px;padding:26px 0 44px;border-top:1px solid var(--border);}
footer.site a{color:var(--accent-2);text-decoration:none;}
footer.site a:hover{text-decoration:underline;}
.admin-link{opacity:.6;} .admin-link:hover{opacity:1;}