:root{
  --eg-bg: #0b1220;
  --eg-surface: rgba(255,255,255,.06);
  --eg-border: rgba(255,255,255,.12);
  --eg-text: rgba(255,255,255,.92);
  --eg-muted: rgba(255,255,255,.72);
  --eg-muted2: rgba(255,255,255,.58);
  --eg-accent: #5eead4;
  --eg-accent2: #60a5fa;
  --eg-shadow: 0 12px 40px rgba(0,0,0,.35);
  --eg-radius: 18px;
}

body{
  background: radial-gradient(1200px 700px at 70% -10%, rgba(94,234,212,.20), transparent 55%),
              radial-gradient(900px 600px at 10% 10%, rgba(96,165,250,.20), transparent 50%),
              var(--eg-bg);
  color: var(--eg-text);
}

.eg-container{ max-width: 1140px; }

.eg-navbar{
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,.70);
  border-bottom: 1px solid var(--eg-border);
}

.eg-brand{
  display:flex; align-items:center; gap:.7rem;
  text-decoration:none; color: var(--eg-text);
  font-weight: 800;
  letter-spacing: .3px;
}
.eg-logo{
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(94,234,212,.35), rgba(96,165,250,.35));
  border: 1px solid var(--eg-border);
  box-shadow: var(--eg-shadow);
}

.eg-hero{
  padding: 64px 0 28px;
}
.eg-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .45rem .8rem;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--eg-border);
  border-radius: 999px;
  color: var(--eg-muted);
  font-size: .9rem;
}

.eg-title{
  font-size: clamp(1.8rem, 2.8vw, 2.8rem);
  line-height: 1.15;
  font-weight: 900;
  margin-top: 14px;
}
.eg-subtitle{
  margin-top: 12px;
  color: var(--eg-muted);
  font-size: 1.05rem;
  max-width: 62ch;
}

.eg-card{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--eg-border);
  border-radius: var(--eg-radius);
  box-shadow: var(--eg-shadow);
}

.eg-section{
  padding: 26px 0;
}
.eg-section h2{
  font-weight: 900;
  font-size: 1.4rem;
  margin-bottom: 14px;
}
.eg-section p, .eg-section li{
  color: var(--eg-muted);
  line-height: 1.9;
}
.eg-kv{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 992px){
  .eg-kv{ grid-template-columns: 1.1fr .9fr; }
}

.eg-meta{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px){
  .eg-meta{ grid-template-columns: repeat(3, 1fr); }
}
.eg-meta .item{
  padding: 16px;
  border-radius: 16px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.08);
}
.eg-meta .label{ color: var(--eg-muted2); font-size:.9rem; }
.eg-meta .value{ margin-top:6px; font-weight: 800; color: var(--eg-text); }

.eg-toc a{
  display:flex; justify-content:space-between; align-items:center;
  text-decoration:none;
  color: var(--eg-muted);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}
.eg-toc a:hover{ color: var(--eg-text); border-color: rgba(94,234,212,.35); }

.eg-pill{
  font-size: .85rem;
  padding: .28rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--eg-muted);
}

.eg-flow{
  padding: 18px;
}
.eg-flow .node{
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  height: 100%;
}
.eg-flow .node h3{
  font-size: 1.05rem;
  font-weight: 900;
  margin: 0 0 6px;
}
.eg-flow .node p{ margin:0; color: var(--eg-muted2); }

.eg-cta{
  padding: 22px;
  background: linear-gradient(135deg, rgba(94,234,212,.14), rgba(96,165,250,.12));
  border: 1px solid rgba(94,234,212,.25);
}
.btn-eg{
  border-radius: 14px;
  padding: .8rem 1rem;
  font-weight: 800;
  border: 1px solid rgba(255,255,255,.14);
}
.btn-eg-primary{
  background: rgba(94,234,212,.14);
  color: var(--eg-text);
  border-color: rgba(94,234,212,.30);
}
.btn-eg-primary:hover{ border-color: rgba(94,234,212,.55); }
.btn-eg-ghost{
  background: rgba(255,255,255,.06);
  color: var(--eg-text);
}

.eg-footer{
  padding: 34px 0;
  border-top: 1px solid var(--eg-border);
  color: var(--eg-muted2);
  margin-top: 30px;
}

/* small helpers */
.eg-divider{ height:1px; background: rgba(255,255,255,.10); margin: 18px 0; }
.eg-small{ color: var(--eg-muted2); font-size: .95rem; }

/* =========================
   Case Studies Index Styles
   ========================= */

.eg-index-search{
  position: relative;
}
.eg-index-search i{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 14px;
  color: rgba(255,255,255,.55);
  pointer-events: none;
}
.eg-index-input{
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding-right: 42px;
  padding-left: 14px;
  height: 46px;
}
.eg-index-input:focus{
  box-shadow: none;
  border-color: rgba(94,234,212,.35);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.92);
}

.eg-index-select{
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  height: 46px;
}
.eg-index-select:focus{
  box-shadow: none;
  border-color: rgba(94,234,212,.35);
}

.eg-case-card{
  padding: 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease;
}
.eg-case-card:hover{
  transform: translateY(-2px);
  border-color: rgba(94,234,212,.28);
}
.eg-case-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.eg-case-title{
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 0;
}
.eg-case-desc{
  color: rgba(255,255,255,.72);
  line-height: 1.8;
  margin: 0;
}
.eg-case-meta{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.eg-case-kpis{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.eg-kpi{
  flex: 1 1 180px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.08);
}
.eg-kpi .kpi-label{ color: rgba(255,255,255,.55); font-size: .9rem; }
.eg-kpi .kpi-value{ color: rgba(255,255,255,.92); font-weight: 900; margin-top: 4px; }

/* =========================
   SaaS Product Card (uses same tokens)
   ========================= */

.eg-product-card{
  padding: 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease;
}
.eg-product-card:hover{
  transform: translateY(-2px);
  border-color: rgba(94,234,212,.28);
}
.eg-product-title{
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1.35;
  margin: 0;
}
.eg-product-desc{
  color: rgba(255,255,255,.72);
  line-height: 1.8;
  margin: 0;
}
.eg-product-actions{
  margin-top: auto;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.eg-product-actions .btn{
  flex: 1 1 auto;
}