.content-wrapper.home{
    position:relative;
  }

  .hero-card{
    position: relative;
    /*background: var(--panel);*/
    background: linear-gradient(180deg, var(--panel), var(--gradient));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .hero-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
  }

  .hero-sub {
    margin-top: 10px;
    font-size: 1rem;
    opacity: 0.85;
    line-height: 1.5;
    max-width: 820px;
  }

  .hero-actions{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:flex-end;
    margin-top: 4px;
    flex-wrap:wrap;
  }

  .btn.btn-ghost{
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
  }
  .btn.btn-ghost:hover{
    background: rgba(255,255,255,0.08);
  }
  .content-wrapper.home .home-badges{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px !important;
    margin-top: 16px !important;
    align-items:center !important;
  }

  .content-wrapper.home .home-badge{
    position: static !important;
    float: none !important;
    display: inline-flex !important;
    align-items:center !important;
    gap:8px !important;

    padding:8px 12px !important;
    border-radius:999px !important;
    white-space: nowrap !important;

    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }

  .modules-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:14px;
  }

  .module-card{
    border-radius:14px;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  }

  .module-card:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  }

  .module-header h3{
    margin:0 0 8px;
  }

  @media (max-width: 1100px){
    .modules-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px){
    .modules-grid{ grid-template-columns: 1fr; }
    .hero-card{ padding:18px; }
  }
  /* icon inside badge */
.home-badge .badge-icon{
  font-size: 0.85rem;
  padding: 6px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* color themes */
.icon-purple{
  color: #b388ff;
  background: rgba(179,136,255,0.12);
}

.icon-blue{
  color: #5da9ff;
  background: rgba(93,169,255,0.12);
}

.icon-cyan{
  color: #3fd5ff;
  background: rgba(63,213,255,0.12);
}

.icon-pink{
  color:#ff7ac6;
  background:rgba(255,122,198,0.12);
}

.icon-gold{
  color: #ffcc66;
  background: rgba(255,204,102,0.12);
}


/* HOMEPAGE MODULE ICON STYLING */
.home .home-module-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:600;
}
.home .home-module-icon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-size:0.9rem;
  transition: transform 150ms ease;
}
.home .home-module-icon i {
  transform: translateY(1px);
}
.home .module-card:hover .home-module-icon{
  transform: scale(1.05);
}
.home .home-icon-purple{
  color:#b388ff;
  background:rgba(179,136,255,0.12);
}
.home .home-icon-blue{
  color:#5da9ff;
  background:rgba(93,169,255,0.12);
}
.home .home-icon-teal{
  color:#14f1c6;
  background:rgba(20,241,198,0.12);
}
.home .home-icon-crimson{
  color:#ff4d6d;
  background:rgba(255,77,109,0.12);
}
.home .home-icon-cyan{
  color:#3fd5ff;
  background:rgba(63,213,255,0.12);
}
.home .home-icon-gold{
  color:#ffcc66;
  background:rgba(255,204,102,0.12);
}
.home .home-icon-green{
  color:#4ade80;
  background:rgba(74,222,128,0.12);
}
.home .home-icon-pink{
  color:#ff7ac6;
  background:rgba(255,122,198,0.12);
}
.home .home-icon-indigo{
  color:#8fa8ff;
  background:rgba(143,168,255,0.12);
}
.home .home-icon-gray{
  color:#9aa3b2;
  background:rgba(154,163,178,0.12);
}
.home .home-icon-orange{
  color:#ff9966;
  background:rgba(255,153,102,0.12);
}