feat: expand Doris homelab services directory

home/doris-dashboard/public/style.css

@@ -55,12 +55,47 @@ main{max-width:1380px;margin:0 auto;padding:18px}
 
 .hero{
   display:grid;
-  grid-template-columns:minmax(0,1.25fr) 430px;
+  grid-template-columns:minmax(0,1.4fr) minmax(320px,.85fr);
   gap:14px;
   align-items:stretch;
   border-radius:24px;
   padding:16px 18px;
-  margin-bottom:16px;
+  margin-bottom:14px;
+}
+
+.hero-main,
+.hero-rail{min-width:0}
+
+.hero-main{
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  gap:10px;
+}
+
+.hero-title-row{
+  display:flex;
+  align-items:flex-start;
+  justify-content:space-between;
+  gap:14px;
+  flex-wrap:wrap;
+}
+
+.hero-chips{
+  display:flex;
+  flex-wrap:wrap;
+  gap:8px;
+  justify-content:flex-end;
+}
+
+.hero-chip{
+  border:1px solid rgba(124,140,255,.28);
+  background:rgba(124,140,255,.10);
+  color:#d9deff;
+  border-radius:999px;
+  padding:7px 10px;
+  font-size:.8rem;
+  white-space:nowrap;
 }
 
 .eyebrow{
@@ -113,6 +148,30 @@ h1{
 
 .status,
 .metrics{
+  display:grid;
+  grid-template-columns:repeat(2,minmax(0,1fr));
+  gap:10px;
+}
+
+.snapshot-block{
+  margin:0 0 16px;
+}
+
+.section-heading-inline{
+  display:flex;
+  justify-content:space-between;
+  align-items:flex-end;
+  gap:12px;
+  margin:0 0 10px;
+  flex-wrap:wrap;
+}
+
+.section-heading-inline h2{
+  margin:2px 0 0;
+  font-size:1.08rem;
+}
+
+.snapshot-strip{
   display:grid;
   grid-template-columns:repeat(4,minmax(0,1fr));
   gap:10px;
@@ -641,3 +700,135 @@ footer p{margin:.25rem 0}
   .nav-links{justify-content:flex-start}
   .services-grid{grid-template-columns:1fr}
 }
+
+
+.feature-story{margin:0 0 2px}
+
+.feature-card{
+  padding:16px;
+  border-radius:20px;
+  position:relative;
+  overflow:hidden;
+  background:linear-gradient(135deg,rgba(124,140,255,.18),rgba(79,209,165,.08)),rgba(17,21,29,.96);
+}
+
+.feature-card::after{
+  content:'';
+  position:absolute;
+  inset:auto -30px -30px auto;
+  width:180px;
+  height:180px;
+  background:radial-gradient(circle,rgba(124,140,255,.16),transparent 68%);
+  pointer-events:none;
+}
+
+.feature-meta{
+  display:flex;
+  gap:10px;
+  flex-wrap:wrap;
+  color:var(--muted);
+  font-size:.82rem;
+  margin-bottom:10px;
+}
+
+.feature-kicker{
+  display:inline-flex;
+  margin-bottom:8px;
+  color:#c7d0ff;
+  text-transform:uppercase;
+  letter-spacing:.14em;
+  font-size:.73rem;
+}
+
+.feature-body{
+  display:grid;
+  grid-template-columns:minmax(0,1.35fr) 230px;
+  gap:16px;
+  align-items:end;
+}
+
+.feature-copy h2{
+  margin:0 0 8px;
+  font-size:1.45rem;
+  line-height:1.08;
+}
+
+.feature-copy p{
+  margin:0;
+  color:#d7deea;
+  line-height:1.5;
+}
+
+.feature-why{
+  margin-top:12px;
+  color:var(--muted);
+  font-size:.86rem;
+}
+
+.feature-actions{
+  display:flex;
+  flex-direction:column;
+  gap:10px;
+  align-items:flex-start;
+}
+
+.feature-open{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  text-decoration:none;
+  border-radius:999px;
+  padding:10px 14px;
+  background:#eef2ff;
+  color:#0f172a;
+  font-weight:700;
+}
+
+.feature-note{
+  color:var(--muted);
+  font-size:.83rem;
+  line-height:1.4;
+}
+
+.trend-chart{
+  display:flex;
+  align-items:flex-end;
+  gap:8px;
+  min-height:120px;
+  margin:8px 0 10px;
+}
+
+.trend-bar-wrap{
+  flex:1;
+  min-width:0;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:flex-end;
+  gap:6px;
+}
+
+.trend-value,
+.trend-label{
+  font-size:.73rem;
+  color:var(--muted);
+}
+
+.trend-bar{
+  width:100%;
+  max-width:28px;
+  border-radius:999px 999px 10px 10px;
+  background:linear-gradient(180deg,#8ea0ff 0%,#4fd1a5 100%);
+  box-shadow:0 8px 20px rgba(79,209,165,.18);
+}
+
+@media (max-width:980px){
+  .focus-grid,.summary-grid,.forecast-grid,.metrics.metrics-compact,.snapshot-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
+  .feature-body{grid-template-columns:1fr}
+}
+
+@media (max-width:920px){
+  .hero-title-row,.section-heading-inline{align-items:flex-start}
+  .hero-chips{justify-content:flex-start}
+  .snapshot-strip{grid-template-columns:1fr}
+}