.tk-hero-section{
  position:relative;

  display:grid;
  grid-template-columns:1.5fr 300px;
  gap:24px;

  margin-bottom:52px;
}

.tk-hero-main{
  position:relative;

  overflow:hidden;

  min-height:360px;

  padding:42px;

  border-radius:30px;

  background:
    radial-gradient(
      circle at top right,
      rgba(45,212,191,0.35),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #0f172a,
      #0f4c81,
      #0f766e
    );

  box-shadow:
    0 24px 50px rgba(15,23,42,0.18);

  color:#fff;
}

.tk-hero-main::before{
  content:'';

  position:absolute;

  width:420px;
  height:420px;

  top:-160px;
  right:-120px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.14),
      transparent 70%
    );
}

.tk-live-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;

  height:36px;

  padding:0 16px;

  border-radius:999px;

  background:#ff4d6d;

  font-size:12px;
  font-weight:800;

  margin-bottom:22px;

  box-shadow:
    0 8px 24px rgba(255,77,109,0.28);
}

.tk-live-dot{
  width:8px;
  height:8px;

  border-radius:50%;

  background:#fff;
}

.tk-hero-title{
  font-size:38px;
  line-height:1.12;
  letter-spacing:-2px;
  font-weight:900;

  margin-bottom:22px;
}

.tk-hero-desc{
  max-width:520px;

  font-size:14px;
  line-height:1.7;

  color:rgba(255,255,255,0.82);

  margin-bottom:34px;
}

.tk-hero-button{
  height:48px;

  padding:0 26px;

  border:none;

  border-radius:18px;

  background:#fff;

  color:#0f172a;

  font-size:14px;
  font-weight:800;

  cursor:pointer;

  transition:.25s ease;

  box-shadow:
    0 12px 32px rgba(255,255,255,0.16);
}

.tk-hero-button:hover{
  transform:translateY(-3px);
}

.tk-hero-side{
  background:rgba(255,255,255,0.82);

  backdrop-filter:blur(20px);

  border:1px solid rgba(255,255,255,0.5);

  border-radius:30px;

  padding:34px;

  box-shadow:
    0 18px 40px rgba(15,23,42,0.06);
}

.tk-side-label{
  font-size:13px;
  font-weight:700;
  color:#64748b;

  margin-bottom:14px;
}

.tk-side-percent{
  font-size:52px;
  line-height:1;
  font-weight:900;

  color:#0f172a;

  margin-bottom:22px;
}

.tk-side-meta{
  display:flex;
  flex-direction:column;
  gap:10px;

  font-size:15px;
  color:#475569;
}

.tk-floating-card{
  position:absolute;

  backdrop-filter:blur(20px);

  background:rgba(255,255,255,0.12);

  border:1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 18px 36px rgba(15,23,42,0.14);

  border-radius:22px;

  color:#fff;
}

.tk-floating-chart{
  right:34px;
  bottom:34px;

  width:180px;

  padding:20px;
}

.tk-floating-label{
  font-size:12px;
  color:rgba(255,255,255,0.7);

  margin-bottom:10px;
}

.tk-floating-value{
  font-size:30px;
  font-weight:900;

  margin-bottom:16px;
}

.tk-mini-bars{
  display:flex;
  align-items:flex-end;
  gap:8px;

  height:48px;
}

.tk-mini-bars span{
  flex:1;

  border-radius:999px;

  background:
    linear-gradient(
      to top,
      #2dd4bf,
      #67e8f9
    );
}

.tk-mini-bars span:nth-child(1){
  height:22px;
}

.tk-mini-bars span:nth-child(2){
  height:42px;
}

.tk-mini-bars span:nth-child(3){
  height:30px;
}

.tk-mini-bars span:nth-child(4){
  height:46px;
}

.tk-floating-users{
  top:40px;
  right:40px;

  padding:16px 20px;
}

.tk-user-stack{
  display:flex;
  margin-bottom:10px;
}

.tk-user-circle{
  width:34px;
  height:34px;

  margin-left:-6px;

  border:2px solid rgba(255,255,255,0.6);

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      #06b6d4,
      #2563eb
    );

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:12px;
  font-weight:800;
}

.tk-user-circle:first-child{
  margin-left:0;
}

.tk-floating-users p{
  font-size:12px;
  color:rgba(255,255,255,0.82);
}