:root{
  --glass: rgba(255,255,255,.06);
  --glass2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.10);
}

body{
  background:
    radial-gradient(800px 500px at 15% 10%, rgba(220, 53, 69, .35), transparent 60%),
    radial-gradient(900px 600px at 85% 25%, rgba(13, 110, 253, .25), transparent 60%),
    #0b0f14;
  min-height: 100vh;
}

.logo-dot{
  width: 12px; height: 12px; border-radius: 999px;
  background: #dc3545;
  box-shadow: 0 0 18px rgba(220,53,69,.55);
}

.hero{
  position: relative;
}

.hero-card{
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--glass), rgba(255,255,255,.03));
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

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

.mock-screen{
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  overflow: hidden;
}

.mock-topbar{
  display: flex;
  gap: 8px;
  padding: 12px;
  background: rgba(255,255,255,.05);
  border-bottom: 1px solid var(--stroke);
}

.mock-topbar span{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}

.mock-body{
  padding: 16px;
}

.mini-card{
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,.05);
}

.mini-title{
  font-size: 12px;
  color: rgba(255,255,255,.65);
}

.mini-value{
  font-size: 20px;
  font-weight: 700;
  margin-top: 6px;
}

.mini-list{
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
}

.feature-card{
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  box-shadow: 0 10px 35px rgba(0,0,0,.25);
  transition: transform .15s ease, background .15s ease;
}

.feature-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
}